Кнопка вверх на сайте.

Последнее время на форумах несколько раз попадались на глаза форумные темы, где пользователи спрашивали, как создать кнопку для перематывания страницы вверх. В основном в ответах им давали ссылки, по которым мне лень было переходить. Но вот и я столкнулся с такой задачей. Для меня было на выбор 2 метода её решения – со скриптами и без. Без скриптов, все разумеется просто – ставим якорь и ссылку с картинкой, задаем ей фиксированное положение и готово. При таком способе у нас не будет плавности перемотки и собственно затухания этой кнопки.

Выбрал второй вариант – написать скрипт. Мне в коей-то степени повезло – не пришлось использовать чистый js, так как на том сайте уже была подключена библиотека jquery. Вот, что у меня в итоге получилось:

$.fn.scrollToTop=function(){ 
$(this).hide().removeAttr("href"); 
if($(window).scrollTop()!="0") 
{$(this).fadeIn("slow")}var scrollDiv=$(this); 
$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")} 
else{$(scrollDiv).fadeIn("slow")} 
}); 
$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")} 
)} 
}); 

Затем вызываете этот скрипт:

$(function() { 
$("#vverh").scrollToTop();  
});

Теперь собственно объяснения:
Изначально объекту задается невидимость, затем, когда человек начинает проматывать страницуу вниз (if($(window).scrollTop()!=”0″) ) происходит плавное появления кнопки на экране ($(this).fadeIn(“slow”)). Если страница вернулась в начальное положение, то кнопка плавно пропадает ($(scrollDiv).fadeOut(“slow”)). Затем при клике просходит плавная перемотка до верха рабочего окна браузера ($(“html, body”).animate({scrollTop:0},”slow”)). При вызове функции #vverh – это блок с вашей ссылкой. Государственная регистрация ИП.

Оставить комментарий