Main > JavaScript > Jquery: простой скроллер для страниц

Jquery: простой скроллер для страниц

12.02.2016 0 comments » Views: 1,364

Привык, что можно длинную страницу быстро прокрутить к верху нажатием на скроллер. Так, как сделано, на этом сайте. Для одного из своего новго проекта, набросал небольшой код, который делает то, что нужно. Делюсь с вами, а так же оставляю себе памятку для использования в будущем..

Прежде всего добавляем ссылку перед </body> но до загрузки скриптов:


<a id="page-scroller" title="Прокрутить страницу вверх"></a>

следующим шагом, добавляем стили:


#page-scroller {
    display:none;
    position:fixed;
    cursor:pointer;
    top:0;
    width:75px;
    height:100%;
    background-color:black;
    opacity:0.15;
}

#page-scroller {

display:none;

position:fixed;

cursor:pointer;

top:0;

width:75px;

height:100%;

background-color:black;

opacity:0.15;

}

ну, и напоследок добавляем скрипт, после подключения Jquery:


function showScroller(){
    var freeSpace = $(window).width()/2 - $('body>div.container').width()/2 - $('#page-scroller').width();
    var showScroller = (freeSpace>50) && ($(this).scrollTop() > 0);
    if (showScroller) {
        $('#page-scroller:hidden').fadeIn();
    } else {
        $('#page-scroller:visible').fadeOut();
    }
}

$(function(){

  $(window).resize(function(){
    showScroller();
  });


  $(window).scroll(function () {
    showScroller();
  });

  $('#page-scroller').click(function(){
    $('body,html').animate({scrollTop: 0}, 400);
    return false;
  });

  showScroller();

});

function showScroller(){

var freeSpace = $(window).width()/2 - $('body>div.container').width()/2 - $('#page-scroller').width();

var showScroller = (freeSpace>50) && ($(this).scrollTop() > 0);

if (showScroller) {

$('#page-scroller:hidden').fadeIn();

} else {

$('#page-scroller:visible').fadeOut();

}

$(function(){

$(window).resize(function(){

showScroller();

});

$(window).scroll(function () {

showScroller();

});

$('#page-scroller').click(function(){

$('body,html').animate({scrollTop: 0}, 400);

return false;

});

showScroller();

});

здесь, автоматически расчитывается ширина клиентской области, чтобы скрывать скроллер, когда нет места. Поэтому, в место body>div.container, надо указать Ваш id/class контейнера содержания страницы.

Пример: jsFiddle

Author: Vitaly Orlov | Rating: 4/5 | Tags: jquery , js , scroll , scroller

Jquery: простой скроллер для страниц

Leave a Reply Cancel reply