2017-01-10 5 views
-1

Я хочу нормальный прокрутить вверх для веб-сайта.Прокрутите страницу вверх страницы, используя чистый JAVASCRIPT без (jquery)

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

Вот в demo

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

+0

Я думаю, что этот ответ поможет вам: [link] (http://stackoverflow.com/questions/3898130/check-if-a-user-has-scrolled-to-the-bottom) –

ответ

0

Вот ответ

HTML

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

CSS

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

PURE JAVASCRIPT (NO 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); 
} 
0

, если вы хотите, чтобы это как можно проще, просто используйте:

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

это будет прокручиваться вас в верхней части сайта.

Смежные вопросы