Четверг, 04.03.2021, 06:52Приветствую Вас Гость | RSS
Главная | | Регистрация | Вход
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]

           

  • Страница 1 из 1
  • 1
Форум » Прочие » Скрипты для сайта uCoz » Прокрутка страницы вверх "Стрелка Вверх" с эфектом появления (Скроллинг страницы)
Прокрутка страницы вверх "Стрелка Вверх" с эфектом появления
Kap6uTДата: Вторник, 03.04.2012, 12:06 | Сообщение # 1
MONSTER KILL
Группа: Администраторы
Сообщений: 129
Награды: 7
Репутация: 109
Статус: :-(





На многих сайта, в правом нижнем углу вы, наверное, замечали стрелочку, с помощью которой осуществляется прокрутка страницы вверх? Конечно, да. О том, как реализовать эту идею, я сегодня вам расскажу. Хотя и не являюсь сторонником, зачастую бесполезных функций на сайте. Но так как многие пользователи привыкли к присутствию прокрутки страницы вверх, то данная тема имеет право на существование и должна быть рассмотрена подробно. Изучив статью, начинающие веб-мастера без труда смогут осуществить данное решение на своем веб-ресурсе без особых усилий.

Сразу хотелось бы отметить одну деталь, если у вас страница имеет небольшой размер, то есть текст на ней короткий и не требует прокрутки, то этот элемент будет лишним.
Лишних элементов не должно быть на сайте. Теперь давайте рассмотрим, как работает прокрутка страницы. Нам потребуется два скрипта 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" и в самом верху укажите путь к картине и ее название.
Code
<img src="http://название сайта/images/arrow.png" style="width: 30px;  height: 42px" />



Где arrow.png и есть картинка. В параметре "startline:100", который отвечает за появление стрелки, вы можете задать другое значение, например, 200. Тогда стрелка прокрутки страницы появится после того, как будет прокручено от верха 200 пикселей.

Теперь в самом низу сайта, перед закрывающимся тегом «/body>» прописываем код для картинки.
Code
<a id="topcontrol"  title="Прокрутить вверх" onclick="scroll(0,0);return false;"><img src="название сайта/images/arrow.png" style="width:30px; height:42px;position:fixed;" alt="наверх" /> </a>



Вот и все. Такой способ полностью подходит абсолютно к любому сайту не зависимо от того какой движок установлен (CMS - система управления содержимым). Корректно работает и в простом документе HTML без использования CMS. Помимо всего прочего, стрелка прокрутки страницы кроссбраузерная (отображается без изъянов в любом браузере) и валидная.


Источник: http://www.info-lite.ru/



Прикрепления: scroll.rar



 
Сообщение




На многих сайта, в правом нижнем углу вы, наверное, замечали стрелочку, с помощью которой осуществляется прокрутка страницы вверх? Конечно, да. О том, как реализовать эту идею, я сегодня вам расскажу. Хотя и не являюсь сторонником, зачастую бесполезных функций на сайте. Но так как многие пользователи привыкли к присутствию прокрутки страницы вверх, то данная тема имеет право на существование и должна быть рассмотрена подробно. Изучив статью, начинающие веб-мастера без труда смогут осуществить данное решение на своем веб-ресурсе без особых усилий.

Сразу хотелось бы отметить одну деталь, если у вас страница имеет небольшой размер, то есть текст на ней короткий и не требует прокрутки, то этот элемент будет лишним.
Лишних элементов не должно быть на сайте. Теперь давайте рассмотрим, как работает прокрутка страницы. Нам потребуется два скрипта 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" и в самом верху укажите путь к картине и ее название.
Code
<img src="http://название сайта/images/arrow.png" style="width: 30px;  height: 42px" />



Где arrow.png и есть картинка. В параметре "startline:100", который отвечает за появление стрелки, вы можете задать другое значение, например, 200. Тогда стрелка прокрутки страницы появится после того, как будет прокручено от верха 200 пикселей.

Теперь в самом низу сайта, перед закрывающимся тегом «/body>» прописываем код для картинки.
Code
<a id="topcontrol"  title="Прокрутить вверх" onclick="scroll(0,0);return false;"><img src="название сайта/images/arrow.png" style="width:30px; height:42px;position:fixed;" alt="наверх" /> </a>



Вот и все. Такой способ полностью подходит абсолютно к любому сайту не зависимо от того какой движок установлен (CMS - система управления содержимым). Корректно работает и в простом документе HTML без использования CMS. Помимо всего прочего, стрелка прокрутки страницы кроссбраузерная (отображается без изъянов в любом браузере) и валидная.


Источник: http://www.info-lite.ru/



Прикрепления: scroll.rar

Автор - Kap6uT
Дата добавления - 03.04.2012 в 12:06
MadmanДата: Вторник, 03.04.2012, 23:13 | Сообщение # 2
MONSTER KILL
Группа: Администраторы
Сообщений: 103
Награды: 5
Репутация: 5
Статус: :-(
Прикольная Ванек стрелочка. Мне нравиться :D
 
СообщениеПрикольная Ванек стрелочка. Мне нравиться :D

Автор - Madman
Дата добавления - 03.04.2012 в 23:13
BusledДата: Понедельник, 23.07.2012, 14:34 | Сообщение # 3
Noob
Группа: Пользователи
Сообщений: 1
Награды: 0
Репутация: 0
Статус: :-(
не скачивается (((
 
Сообщениене скачивается (((

Автор - Busled
Дата добавления - 23.07.2012 в 14:34
MadmanДата: Вторник, 24.07.2012, 02:17 | Сообщение # 4
MONSTER KILL
Группа: Администраторы
Сообщений: 103
Награды: 5
Репутация: 5
Статус: :-(
Да проблема! :(
 
СообщениеДа проблема! :(

Автор - Madman
Дата добавления - 24.07.2012 в 02:17
Kap6uTДата: Вторник, 24.07.2012, 09:48 | Сообщение # 5
MONSTER KILL
Группа: Администраторы
Сообщений: 129
Награды: 7
Репутация: 109
Статус: :-(
Перезалил. Можете качать loser



 
СообщениеПерезалил. Можете качать loser

Автор - Kap6uT
Дата добавления - 24.07.2012 в 09:48
RiderДата: Пятница, 12.07.2013, 18:02 | Сообщение # 6
Noob
Группа: Пользователи
Сообщений: 1
Награды: 0
Репутация: 0
Статус: :-(
отличная кнопка... как поставить ее слева?


Сообщение отредактировал Rider - Пятница, 12.07.2013, 18:03
 
Сообщениеотличная кнопка... как поставить ее слева?

Автор - Rider
Дата добавления - 12.07.2013 в 18:02
MadmanДата: Суббота, 13.07.2013, 01:08 | Сообщение # 7
MONSTER KILL
Группа: Администраторы
Сообщений: 103
Награды: 5
Репутация: 5
Статус: :-(
Да вроде и справа не чего. Я не знаю.
 
СообщениеДа вроде и справа не чего. Я не знаю.

Автор - Madman
Дата добавления - 13.07.2013 в 01:08
Форум » Прочие » Скрипты для сайта uCoz » Прокрутка страницы вверх "Стрелка Вверх" с эфектом появления (Скроллинг страницы)
  • Страница 1 из 1
  • 1
Поиск:
         
Загрузка...

Design by Kap6uT © 2021
Конструктор сайтов - uCoz