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

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

Оглавление:
  1. Прокрутка страницы HTML
  2. Прокрутка страницы JavaScript
  3. Прокрутка страницы jQuery

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Крым, Белогорский район, с. Зуя
Тел: +7(978)1176627

Кнопка для прокрутки страницы на верх для большой статьи
Кнопка для прокрутки страницы на верх
К началу

Прокрутка страницы 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>

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

54321
(2 голоса, в среднем: 5 из 5)