Как сделать кнопку плавной прокрутки вверх при помощи JQuery

В данной статье мы рассмотрим способ создания кнопки прокрутки страницы вверх при помощи jQuery.Эта кнопка размещается в нижней части страницы, справа. Данная кнопка появляется когда вы листаете страницу вниз. Этот метод реализован при помощи небольшого кусочка CSS и JavaScript кода, ну и картинки которая используется в качестве кнопки.
Данная кнопка хороша тем, что для создании не нужно писать много скриптов, и у нее есть довольно-таки не плохие эффекты.

Что нам нужно

Изображение

HTML код:

Данный HTML код нужно вставить перед закрывающим тэгом </body>

<a href="#" class="scrollup">Наверх</a>

CSS стили:

.scrollup{
  width:40px;
  height:40px;
  opacity:0.3;
  position:fixed;
  bottom:50px;
  right:100px;
  display:none;
  text-indent:-9999px;
  background: url('icon_top.png') no-repeat;
}

При помощи данных стилей, мы определяем позицию кнопки и задаем для нее отступы 50px снизу и 100px справа. Данный стили лучше добавить в файл с вашими стилями.

jQuery:

Сначала нужно подключить библиотеку jQuery, если она еще не подключена. Сделать это можно при помощи данного скрипта, вставив его между тегами <head></head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Затем нам нужно расположить следующий код. Это можно сделать как между <head></head>, так и перед закрывающим тэгом </body>.

<script type="text/javascript">
  $(document).ready(function(){
 
  $(window).scroll(function(){
//Определяет положение полосы прокрутки и если ниже 100px, то появляется кнопка.
     if ($(this).scrollTop() > 100) { 
     $('.scrollup').fadeIn();
  } else {
     $('.scrollup').fadeOut();
  }
});
 
  $('.scrollup').click(function(){
//Есть еще два значения:
//0 - страница будет прокручена до самого налача
//600 - скорость анимации прокрутки
  $("html, body").animate({ scrollTop: 0 }, 600);
  return false;
 });
 
});
</script>

Вот весь процесс создания кнопки для прокрутки страницы вверх.

Надеюсь эта статья была для вас полезной 🙂

Так же узнайте как сделать на своем сайте кнопку добавить в избранное

И не забудьте подписаться на нас в телеграмме а также в соц. сетях 😉

Оставьте ответ

comment-avatar

*