Кнопка "Наверх" с прокруткой
Скрипт добавляет кнопку "наверх" после того, как пользователь отскроллит страницу на 300px вниз.
При нажатии плавная прокрутка.
Так же поднимает кнопку при достижении футера
$(function(){ $("body").append('<div id="gototop"><span class="alt">Наверх</span></div>'); $("#gototop").mousemove(function(){ $("#gototop .alt").delay(1000).fadeIn(100); }).mouseleave(function(){ $("#gototop .alt").stop(true, true).fadeOut(100); }).click(function(){ $("html, body").animate({scrollTop:0}, 'slow'); }); $(document).scroll(function(){ var scroll = $(document).scrollTop(); var docHeight = $(document).height(); var winHeight = $(window).height() delta = (docHeight - scroll - winHeight); if(scroll > 300) { if(delta < 60) $("#gototop").stop(true, true).animate({"bottom" : "70px"}, 200); else $("#gototop").stop(true, true).animate({"bottom" : "15px"}, 200); $("#gototop").show(); } else $("#gototop").hide(); }); });Стили для кнопки
#gototop { display: none; position: fixed; right: 15px; bottom: 15px; width: 45px; height: 45px; background: url(/demo/gototop.png) no-repeat; z-index:2; cursor: pointer; } #gototop .alt { display: none; border: 1px solid #bababa; background: #fff; color: #002e4f; font-size: 12px; font-weight: bold; position: absolute; top: -10px; right: 45px; padding: 2px 5px; box-shadow: 0px 2px 5px rgba(0,0,0,0.5); }
Комментарии