Прокрутка вверх

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

Для начала создания сценария нам понадобится скачать библиотеку jQuery и плагин jQuery. Scroll.

Теперь присоедините два js файла к Вашей HTML странице.


 <script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
 <script src="/js/jquery.scroll.pack.js" type="text/javascript"></script>
 

После всего текста, перед закрытием тега </body> вставьте ссылку в верхнюю часть страницы.

<a id=”goToTop” href=”#” >Вверх</a>

Теперь нам необходимо создать функцию jQeury, какая будет выполнять переход вверх страницы сайта. Функция выглядит следующим образом:


 <script type="text/javascript">
 $(function() {
 $("#toTop").scrollToTop();
 });
 </script>
 

На этом все. Функцию Вы можете разместить после подключения jQuery библиотеки.

Написанный нами код должен выглядеть примерно таким образом:


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
 <title>jQuery прокрутка вверх </title>
 <link rel="stylesheet" type="text/css" href="css/style.css" />
 <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
 <script src="js/jquery.scroll.pack.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function() {
 $("#toTop").scrollToTop();
 });
 </script>
 </head>
 <body>
 <div id="content">
 <p><!--Здесь должен находиться текст сайта.--></p>
 </div>
 <a href="#" id="toTop">^ Вверх</a>
 </body>
 </html>
 

Понравился урок? Добавьте его к себе в закладки.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *