После того как пользователь прочитал или просмотрел большое количество контента на странице Вашего сайта, ему возможно понадобится вернуться к началу страницы. Для этого существует полоса прокрутки, автоматически появляющаяся справа, у любого браузера. Но можно упростить, процесс взбирания вверх, простым нажатием на специально созданную Вами ссылку и добавления всего лишь нескольких строк кода jQuery. Всё очень даже просто. Вот как это происходит, сначала проверяется, в какой позиции находится полоса прокрутки, затем ссылка автоматически появляется при прокрутке вниз и исчезает при прокрутке вверх, а при нажатии на ссылку страница плавно возвращается к началу.
Первый шаг. HTML код
Тег <span></span> является промежуточным и добавлен для отображения фоновой стрелки.
Второй шаг. Дизайн & CSS
#back-top { position: fixed; bottom: 30px; margin-left: -150px; } #back-top a { width: 108px; display: block; text-align: center; font: 11px/100% Arial, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; color: #bbb; /* transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } #back-top a:hover { color: #000; } /* arrow icon (span tag) */ #back-top span { width: 108px; height: 108px; display: block; margin-bottom: 7px; background: #ddd url(up-arrow.png) no-repeat center center; /* rounded corners */ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /* transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } #back-top a:hover span { background-color: #777; }
Нужно отметить, что в идентификаторе #back-top прописывается свойство position:fixed, таким образом элементу на странице присваивается фиксированное положение. Ещё было добавлено такое свойство как transition:1s (1s = 1 секунда), чтобы создать эффект затухания при наведении мыши на стрелку.
Третий шаг.
Ниже приведен код Javascript, Вы можете вставить его в любом месте на странице сайта, но как правило его прописывают между тегами <head></head>. Вначале, он скрывает элемент #back-top (В html это <p id="back-top">). Затем, если прокрутка происходит вниз, то стрелка медленно появляется fadeIn (), в противном случае стрелка исчезает fadeOut (). Следующий набор кода приходит в действие при нажатии курсором мыши на стрелку, что приводит к оживлению прокрутки и плавному переходу к началу страницы.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script> $(document).ready(function(){ // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#back-top').fadeIn(); } else { $('#back-top').fadeOut(); } }); // scroll body to 0px on click $('#back-top a').click(function () { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); }); </script>
Заключение.
Обратите внимание на то, что ссылка указывает на якорь #top, который является идентификатором тега <body>. С технической точки зрения Вы можете назначить любой якорь ссылке, и прокручивать страницу в любое место. Даже при выключенном Javascript ссылка всё равно будет работать, но не так элегантно как с jQuery.
3 комментариев к “Анимированная прокрутка к началу страницы”
Огромное спасибо, этот плагин, а точнее кусок его помог мне реализовать мою идею
Здравствуйте. Замечательный скрипт, но у меня не работает на WordPress (сайт seo-armory.ru).
Скрипт вставил в head, стили в стили, P и SPAN — в конец body, но не перед закрывающим тэгом. Ничего не появляется. Не подскажете, в чем может быть проблема?
Прошу прощения. Повторил вставку кода еще раз, всё заработало. Видимо, моя невнимательность в первый раз.