Плавное вертикальное прокручивание на jQuery к началу страницы

Нет картинки Пример плавного вертикального прокручивания, с использованием фиксированно расположенной стрелки "наверх". Стрелка появляется, если опуститься немного вниз и исчезает, когда мы поднимаемся наверх страницы.
Подключите этот код к файлу со скриптами на вашей странице или создайте отдельный файл .js с этим кодом и подключите его к странице:
(function($){

/* использование: <a class='scrollTop' href='#' style='display:none;'></a>
------------------------------------------------- */
$(function(){
	var e = $(".scrollTop");
	var	speed = 500;
	
	e.click(function(){
		$("html:not(:animated)" +( !$.browser.opera ? ",body:not(:animated)" : "")).animate({ scrollTop: 0}, 500 );
		return false; //важно!
	});
	//появление
	function show_scrollTop(){
		( $(window).scrollTop()>300 ) ? e.fadeIn(600) : e.hide();
	}
	$(window).scroll( function(){show_scrollTop()} ); show_scrollTop();
	
});

})(jQuery)

Стили для фиксированого позиционирования и указания картинки

<style type="text/css">	
	.scrollTop{ 
		background:url(arrows2.png) 0 0 no-repeat;
		display:block; width:50px; height:50px; 
		position:fixed; bottom:10px; left:47%;
		z-index:2000; 
	}
	.scrollTop:hover{ background-position:0 -58px; }
</style>
Вместо arrows2.png нужно указать путь к картинке, которая для данного примера выглядет так:

Последний штрих

Чтобы все заработало нужно вставить этот код в любое место страницы (желательно в самом конец, в подвал):
 <a class='scrollTop' href='#' style='display:none;'></a>

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (1)     Подпишитесь на RSS комментариев к этой статье.

1 комментарий

#878
Андрей говорит:
May 21, 2013 at 03:23 pm
А что если не работает? Вставляю кнопку - не работает слайдшоу, убираю - работает. В чем может быть проблема? Благодарю за ответ!