Прокрутка страницы

Прокрутка на верх страницы после нажатия на кнопку избавляет пользователя крутить колесико мыши. Такая кнопка на веб-странице особенно полезна когда статья большая.

Оглавление:
  1. Прокрутка страницы HTML
  2. Прокрутка страницы JavaScript
  3. Прокрутка страницы jQuery
Кнопка для прокрутки страницы на верх для большой статьи
Кнопка для прокрутки страницы на верх

Прокрутка страницы HTML

Сделать кнопку Вверх не хитрое дело, в HTML давно уже существует якорь, который переместит страницу в указанное место, в нашем случае — это верх страницы. Для этого достаточно возле открывающегося тега body добавить элемент div с идентификатором TOP.

<body><div id="TOP"></div>

Кнопка вверх — ссылка, сноска для перехода к идентификатору.

<a href="#TOP">наверх</a>

Обычно ссылка расположена внизу страницы. Но, если к ссылке добавить класс go-top и написать стиль CSS, тогда можно зафиксировать позицию кнопки.

.go-top {
    position: fixed; /* фиксированная позиция */ 
    bottom: 1%; /* отступ снизу */ 
    z-index: 999; /* высокий стек */ 
    /* отступ слева left: 1%;
       или 
       отступ справа right: 1%; */
    margin: 1%; /* внешний отступ */
}

Слово наверх можно заменить символом HTML, например стрелкой ↑, ▲. Или изображением, тогда в стиль для класса .go-top добавим свойство background-image: url(img/top.png); значение которого ссылка на картинку.

Добавить символ HTML поможет псевдоэлемент :before

.go-top:before { content:"↑"; }

Лучший способ применить SVG иконки рядом или вместо слова наверх.

К началу

Прокрутка страницы JavaScript

Без JavaScript не обойтись, если нужна плавная прокрутка, и спрятать кнопку, когда прокрутка страницы закончилась.

function up() {
    var e = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
    return e > 0 ? (window.scrollBy(0, (e + 100) / -10), t = setTimeout("up()", 20)) : clearTimeout(t), !1;
}
window.onscroll = function myScroll() {
    var toTop = document.querySelector(".to-top");
   (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) ? toTop.style.display='block' : toTop.removeAttribute('style');
}

Скрипт работает во всех браузерах и быстрее чем classList.

HTML

<button class="to-top" style="display: none;" onclick="up();"></button>

Для кнопки добавлен стиль display: none; чтобы кнопка не появлялась сразу после открытия страницы, а только после прокрутки вниз. Плавное появление и исчезание кнопки, эффекты отскока требуют дополнительный код, думаю это лишние.

Еще один не плохой вариант JavaScript прокрутить страницу вверх.

!function () {
    "use strict";
    if ("querySelector" in document && "addEventListener" in window && Array.prototype.forEach) {
        var e = function (e, t) {
            var n, r = window.pageYOffset, o = e.offsetTop, i = o - r, c = i / (t / 16), a = function () {
                window.scrollBy(0, c), n();
            };
            n = c >= 0 ? function () {
                var e = window.pageYOffset;
                (e >= o - c || window.innerHeight + e >= document.body.offsetHeight) && clearInterval(f);
            } : function () {
                var e = window.pageYOffset;
                (o || 0) >= e && clearInterval(f);
            };
            var f = setInterval(a, 16);
        }, t = document.querySelectorAll(".scroll");
        [].forEach.call(t, function (t) {
            t.addEventListener("click", function (n) {
                n.preventDefault();
                var r = t.getAttribute("href"), o = document.querySelector(r), i = t.getAttribute("data-speed");
                o && e(o, i || 500);
            }, !1);
        });
    }
}();

Скрипт использует якорь и атрибут data-speed="400" для настройки скорости прокрутки страницы. Этот JavaScript можно использовать для прокрутки страницы вверх и вниз.

HTML

<a class="scroll" data-speed="400" href="#footer">вниз</a>

для тега footer

<footer id="footer">
</footer>
К началу

Прокрутка страницы jQuery

Если к странице подключена библиотека jQuery, тогда скрипт для кнопки прокрутить страницу с анимацией наверх будет проще.

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

HTML

<a href="#top">наверх</a>

Полезные ссылки