Плавный скролл для навигации по сайту или кнопка «Наверх»

Довольно популярная тема о том, как сделать подобную кнопку. Плавность нужна скорее не для красоты, а для того, чтобы для посетителя сайта не было неожиданностью то место, где он после нажатия кнопки окажется.


Собственно сам код скрипта с использованием jQuery:

jQuery(function() {
  jQuery("#js-smooth_scrolling").hide().removeAttr("href");

  if (jQuery(window).scrollTop() >= "250")
    jQuery("#js-smooth_scrolling").fadeIn("slow");

  jQuery(window).scroll(function() {
    if (jQuery(window).scrollTop() <= "250") 
      jQuery("#js-smooth_scrolling").fadeOut("slow");
    else 
      jQuery("#js-smooth_scrolling").fadeIn("slow");
  });

  jQuery("#js-smooth_scrolling").click(function() {
    jQuery("html, body").animate({ scrollTop: 0 }, "slow")
  })
});

Все! Осталось создать блок с указанным идентификатором (в нашем случае

js-smooth_scrolling

), а также стилями задать как минимум свойство

position: fixed

,

Остальное зависит исключительно от вашей фантазии.


admin

Share
Published by
admin

Recent Posts

Что такое Zulip

Zulip — программное обеспечение для реализации корпоративного чата. Разработан в 2012 году, в 2014 был…

4 часа ago

Что такое Zookeeper

Zookeeper — cервис-координатор, который позволяет обеспечить контроль синхронизации данных. Разработан на Java компанией Apache Software…

4 часа ago

Что такое Zimbra

Zimbra — программное обеспечение для реализации почтового сервиса или, если сказать точнее, автоматизации совместной деятельности…

4 часа ago

Что такое Zabbix

Zabbix — бесплатная система мониторинга. Позволяет отслеживать состояние сетевых узлов, компьютеров и серверов. Возможности: Поддержка…

4 часа ago

Что такое YouTube

YouTube — компания-владелец одноименного портала для просмотра и хранения видео. Чтобы пользоваться данным порталом достаточно…

4 часа ago

Что такое yota

Yota — провайдер, предоставляющий доступ к сети Интернет по беспроводной связи. Впервые, сервис начал работать…

4 часа ago