Создаем кнопку для прокрутки страницы вверх (CSS & jQuery)

Несмотря на то, что существует ряд готовых jQuery- плагинов позволяющих создать кнопку/панельку для прокрутки сайта вверх (с разными визуальными эффектам), сегодня мы сами создадим такую кнопочку, для того чтобы понять как она работает, а заодно и познакомиться с некоторыми аттрибутами CSS и функциями jQuery. Демо доступно в песочнице.

Начнем с HTML-части. Здесь все просто, для примера я поместил содержание в блок с классом .content, а за нашу кнопку отвечает класс .go-top.

<div id="content">

<h2>Заголовок</h2>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

<img src="http://placeimg.com/300/200/people" />

</div>

<div class="go-top"></div>

В данном примере я создал не кнопку, а целый область занимающий левую часть экрана (как ВКонтакте). Как только пользователь прокрутит страницу на X пикселей вниз, он увидит нашу панельку с иконкой стрелочки, которая при клике прокрутит страницу наверх и снова исчезнет.

#content{
  width:300px;
  display:block;
  margin: 0 auto;
  background: #fff;
  padding: 5px 20px;
}

.go-top {
  position:fixed;
  bottom: 2px;
  left:0px;
  background: #333;
  padding:20px;
  display:none;
  color: #fff;
  cursor: pointer;
  height: 100%;
  opacity: 0.4;
  -webkit-opacity: 0.4;
  -moz-opacity: 0.4;
  width:100px;
}

.go-top:after {
  content: &#8216;\25B2&#8217;;
  position: absolute;
  bottom:10px;
  left: 50px;
  font-size: 32px;
  font-weight:100;
}

И последняя часть кода это jQuery. Здесь стоит отметить два главных события это scroll() – то, что должно происходить при прокрутке страницы и click() – действие по клике на нашу кнопку. Функция scrollTop() возвращает позицию, насколько страницы прокручена вниз.

$(function(){

  $(window).scroll(function(){
      var scrolled = $(window).scrollTop();

      if (scrolled > 200) $(&#8216;.go-top&#8217;).fadeIn(&#8216;slow&#8217;);
      if (scrolled < 200) $(&#8216;.go-top&#8217;).fadeOut(&#8216;slow&#8217;);
    });

    $(".go-top").click(function () {
    $("html, body").animate({ scrollTop: "0" },200);
  });

});

(scrolled > 200) – обозначает, что наша панелька будет появляться только после того, как пользователи прокрутит страницу ровно на более чем 200 пикселей вниз. Конечно же, эту цифру можно смело изменить, в зависимости от ваших потребностей.

Демо:

See the Pen Back to Top Button (CSS & jQuery) by 4gray (@4gray) on CodePen

Создаем кнопку для прокрутки страницы вверх (CSS & jQuery)

Демо:

О сайте

ArtsLab