Я хочу нормальную прокрутку наверх для сайта.

Ссылка прокрутки вверх отображается внизу страницы (рядом с нижним колонтитулом), которая видна только после прокрутки мышью на 200 пикселей вниз и должна быть скрыта при прокрутке вверх. БЕЗ JQUERY

Вот демонстрационная версия

В этой демонстрации спина вверх уже находится внизу. Есть ли какой-нибудь способ показать фиксированную ссылку, как я упоминал выше?

4
Rushi Jagani 10 Янв 2017 в 17:32

2 ответа

Лучший ответ

Вот ответ

< Сильный > HTML

<a id="scroll_to_top_id"></a>

< Сильный > CSS

#scroll_to_top_id {
  display: none;
  position: fixed;
  right: 30px;
  bottom: 30px;
  background
}

ЧИСТЫЙ JAVASCRIPT (НЕТ JQUERY)

/*
 *  Scroll To Top
 */

var your_header        = document.getElementById('header_id'),
    scroll_to_top   = document.getElementById('scroll_to_top_id');


window.onscroll = function(ev) {

    var  scrollTop = window.pageYOffset || document.body.scrollTop;
    if (scrollTop > your_header.offsetHeight + 100) {

        scroll_to_top.style.display = 'block';
    }
    else{
        scroll_to_top.style.display = 'none';   
    }
};

scroll_to_top.onclick = function () {
    scrollTo(document.body, 0, 100);
}

/*
 *  scroll to body top
 *  element, position and time duration
 */
function scrollTo(element, to, duration) {
        if (duration < 0) return;
        var difference = to - element.scrollTop;
        var perTick = difference / duration * 2;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        scrollTo(element, to, duration - 2);
    }, 10);
}
1
Rushi Jagani 11 Янв 2017 в 06:34

Если вы хотите сделать это максимально простым, просто используйте:

<a href="#" onClick="window.scrollTo(0,0)">

Это приведет вас к началу вашего сайта.

2
user5711452user5711452 12 Янв 2017 в 05:56