На многих сайта, в правом нижнем углу вы, наверное, замечали стрелочку, с помощью которой осуществляется прокрутка страницы вверх? Конечно, да. О том, как реализовать эту идею, я сегодня вам расскажу. Хотя и не являюсь сторонником, зачастую бесполезных функций на сайте. Но так как многие пользователи привыкли к присутствию прокрутки страницы вверх, то данная тема имеет право на существование и должна быть рассмотрена подробно. Изучив статью, начинающие веб-мастера без труда смогут осуществить данное решение на своем веб-ресурсе без особых усилий.
Сразу хотелось бы отметить одну деталь, если у вас страница имеет небольшой размер, то есть текст на ней короткий и не требует прокрутки, то этот элемент будет лишним. Лишних элементов не должно быть на сайте. Теперь давайте рассмотрим, как работает прокрутка страницы. Нам потребуется два скрипта Java Script и одна картинка. Оба скрипта принадлежат Google. Один из них выполняет функцию плавной прокрутки, а другой настройки положения и отображения элемента на странице. Достаточно часто можно увидеть на сайтах прокрутку страницы не отвечающую никаким требованием. При нажатии на такую кнопку страница просто мгновенно возвращается наверх. Какие либо эффекты, связанные с прокруткой просто отсутствуют. Но этого можно добиться и не использую большегрузных скриптов. Достаточно будет прописать следующую ссылку с использованием сценария Java Script.
Code
<a href="javascript:window.scrollTo(0,0);">К началу страницы</a>
Данный вариант позволяет прокрутить страницу до определенной точки. Здесь допустимо применение двух параметров, которые зададут координаты места, до которого нужно прокрутить страницу. Координаты задаются в пикселях, и имеют горизонтальное и вертикальное значение. Работу этого кода поддерживают все браузеры, IE начиная с версии IE - 4 и выше. В месте, где вы хотите отобразить ссылку - "К началу страницы", вставьте вышеуказанный код. Если вам не нужно, чтобы прокрутка осуществлялась до самого верха, то задайте параметры, например, 0, 250. В этом случае, прокрутка не доедет до верха 250 пикселей.
Такой вариант слишком прост. Мы же рассмотрим более сложный и функциональный способ. Для этого скачайте скрипт из прикрепленного архива в самом низу поста. Распакуйте архив. В нем находится два скрипта и картинка. Переместите скрипты в папку на сервере, где расположен ваш сайт. Папка может быть любая, так же можно создать новую директорию. Для примера, мы создадим с вами папку под названием "Script". В нее и добавим наши скрипты (scroll.js и scroll_style.js). Если у вас на сайте были установлены скрипты от Google, например, подсветка кода, то скрипт "scroll.js" устанавливать ненужно. Картинку - arrow.png, необходимо закачать в папку с изображениями, обычно она называется "images". После того, как вы проделаете эти действия, приступим к установке.
Первое, что нужно сделать - это указать пути к нашим скриптам и картинке. Между тегами вставляем следующий код:
Code
<script type="text/javascript" src="путь к папке/Script/scroll.js"></script> <script type="text/javascript" src="путь/Script/scroll_style.js"></script>
Таким образом, мы подключаем файлы скриптов к странице HTML. Теперь нужно указать путь к картинке. Для этого откройте файл "scroll_ style.js" и в самом верху укажите путь к картине и ее название.
Где arrow.png и есть картинка. В параметре "startline:100", который отвечает за появление стрелки, вы можете задать другое значение, например, 200. Тогда стрелка прокрутки страницы появится после того, как будет прокручено от верха 200 пикселей.
Теперь в самом низу сайта, перед закрывающимся тегом «/body>» прописываем код для картинки.
Вот и все. Такой способ полностью подходит абсолютно к любому сайту не зависимо от того какой движок установлен (CMS - система управления содержимым). Корректно работает и в простом документе HTML без использования CMS. Помимо всего прочего, стрелка прокрутки страницы кроссбраузерная (отображается без изъянов в любом браузере) и валидная. Источник:http://www.info-lite.ru/
