Функция не такая важная, но очень интересная. Логично, что кнопка, про которую мы говорим, должна появляться только тогда, когда есть такая необходимость. Конечно, пользователь может и сам крутануть страницу, но если вы хотите, чтобы кнопка Наверх была как ВКонтакте, то можно просто взять код с этой страницы.
Сложного ничего в коде нет: кнопка появляется в верхней части экрана тогда, когда позиция в окне меняется на определенную. А сама кнопка, собственно, как ракета, отправляет Вас на самый верх. Используется jQuery, поэтому полет анимированный.
Источник: yraaa.ru
Добавляем кнопку наверх и вниз страницы как вконтакте
Сегодня будем ставить Кнопку «ВВерх» и «ВНИЗ» ,т.е. кнопка работает в двух направлениях.
Scroll To Top — Кнопка вверх — Событие прокрутки scroll to top
И так приступим
1.В нашем шаблоне откриваем файл стилей и добавляем вот эти стили для нашей кнопки,в дальнейшем вы можете их отредактировать под свой сайт
.in_top{
position: fixed;
left: 0px;
top: 0px;
width: 100px;
height: 100%;
opacity: 0.5;
filter: alpha(opacity=50);
cursor: pointer;
display: none;
>
.in_top:hover{
background-color: #E1E7ED;
opacity: 1;
filter: alpha(opacity=100);
>
.in_top span{
display: block;
width: 100px;
margin-top: 10px;
text-align: center;
color: #45688E;
font-weight: bold;
>
2.Сам скрипт нашей кнопки,можете добавить в любой файл js вашего шаблона ,
// объявим переменные
var bottom_position = 0; // положение страницы
var flag_bottom = false; // флаг, для отображения кнопки «назад»
var flag_animate = false;// Флаг, определяющий, выполнение анимации
$(document).ready(function(){
// клик по кнопке вверх/назад
$(‘.in_top’).click(function(){
// поднимаем флаг, началась выполнениние анимации
flag_animate = true;
// если на данный момент кнопка «назад»
if(flag_bottom){
// то скролим страницу в нужное место
$(«body,html»).animate({«scrollTop»:bottom_position>, 300, function(){
// опускаем влаг анимации, она закончилась
flag_animate = false;
>);
// меняем кнопку
flag_bottom = false;
$(‘.in_top span’).html(‘↑ Наверх ↑’);
>else{
// если кнопка «вверх»
$(«body,html»).animate({«scrollTop»:0>, 300, function(){
flag_animate = false;
>);
// запомним на сколько была прокручена страница
bottom_position = $(window).scrollTop();
// и зададим флаг, что нужно показать кнопку «назад»
Уроки jQuery практика- как сделать кнопку наверх (back to top) как вконтакте
flag_bottom = true;
$(‘.in_top span’).html(‘↓ Назад ↓ ‘);
>
>);
// делаем проверку при скролле
$(window).scroll(function(event){
var countScroll = $(window).scrollTop();
// если прокрутили больше 100 пикселей и анимация не выполняется, то показываем кнопку
if (countScroll > 100 !flag_animate){
$(‘.in_top’).show();
if(flag_bottom){
flag_bottom = false;
$(‘.in_top span’).html(‘↑ Наверх ↑’);
>
// иначе прячем кнопку, если это не кнопка «назад»
>else{
if(!flag_bottom){
$(‘.in_top’).hide();
>
>
>);
>);
или просто заключить в тег
3.Ну и сама кнопка,добавляем перед закрытием тега body
↑ Наверх ↑
4.Вот и все пользуемся.
Можешь почитать и вот эту статейку «Удаление дублей страниц»
Источник: ngcmshak.ru
Как сделать на сайте кнопку «Наверх» как ВКонтакте
Огромная часть населения бывшего СССР пользуется социальной сетью ВКонтакте. Если у вас есть личная страница ВКонтакте, вы наверняка не только обращали внимание, но и пользовались полезной кнопкой «Наверх». Иногда страница достигает больших размеров и, чтобы подняться наверх, приходится очень долго крутить колесико мышки. Так вот, все я это введу к тому, что в этой статье, я расскажу, как сделать на сайте кнопочку «Наверх» по оформлению такую же, как в социальной сети ВКонтакте.
Вы можете посмотреть пример, как это выглядит:
Ну как, впечатлены?
Ну, теперь перейдем к самому веселому – коду. Некоторых пугает это слово «код». Бояться здесь нечего, нужно просто повторить все, что я делаю в примерах.
Код вставляется перед
2. Далее вставляете небольшой javascript код:
jQuery(function () < jQuery(window).scroll(function () < if (jQuery(this).scrollTop() >50) jQuery(‘a#bloggood-ru_up’).fadeIn(600); else jQuery(‘a#bloggood-ru_up’).fadeOut(600); >); jQuery(‘a#bloggood-ru_up’).click(function () < jQuery(‘body,html’).animate(< scrollTop: 0 >, 0); return false; >); >);
Код вставляется перед
Настройки:
Строка №4 – « 50 » – это количество прокрученных пикселей, через которое появится кнопка.
Строка №5 – « 600 » – отвечает за время появления кнопки (в миллисекундах).
Строка №7 – « 600 » – отвечает за время исчезновения кнопки (в миллисекундах).
3. Добавляем CSS стили:
a#bloggood-ru_up < position: fixed; top: 0; width: 10%; height: 100%; display: none; text-align: center; font: bold 12px Verdana, sans-serif; text-decoration: none; color: #45688E; padding-top: 10px; opacity: 0.7; filter: alpha(opacity=70); left: 0; >a#bloggood-ru_up:hover
Как подключить код CSS к HTML файлу, читайте тут.
4. И напоследок: сама кнопка « Наверх » выглядит как обычная ссылка с заглушкой « # » с CSS классом:
Код вставляется перед
Вот абсолютно готовый код:
Как сделать на сайте кнопку «Наверх», как ВКонтакте на BlogGood.ru jQuery(function () < jQuery(window).scroll(function () < if (jQuery(this).scrollTop() >50) jQuery(‘a#bloggood-ru_up’).fadeIn(600); else jQuery(‘a#bloggood-ru_up’).fadeOut(600); >); jQuery(‘a#bloggood-ru_up’).click(function () < jQuery(‘body,html’).animate(< scrollTop: 0 >, 0); return false; >); >); a#bloggood-ru_up < position: fixed; top: 0; width: 10%; height: 100%; display: none; text-align: center; font: bold 12px Verdana, sans-serif; text-decoration: none; color: #45688E; padding-top: 10px; opacity: 0.7; filter: alpha(opacity=70); left: 0; >a#bloggood-ru_up:hover < color: #45688E; background: #E1E7ED; opacity: 0.8; filter: alpha(opacity=80); >.conteiner
(Пам’яті Т. Г. Шевченка)
Діамант дорогий на дорозі лежав, —
Тим великим шляхом люд усякий минав,
І ніхто не пізнав діаманта того.
Йшли багато людей і топтали його,
Але раз тим шляхом хтось чудовний ішов,
І в пилу на шляху діамант він найшов.
Камінець дорогий він одразу пізнав,
І додому приніс, і гарненько, як знав,
Обробив, обточив дивний той камінець,
І уставив його у коштовний вінець.
Сталось диво тоді: камінець засіяв,
І промінням ясним всіх людей здивував,
І палючим огнем кольористе блищить,
І проміння його усім очі сліпить.
Так в пилу на шляху наша мова була,
І мислива рука її з пилу взяла.
Полюбила її, обробила її,
Положила на ню усі сили свої,
І в народний вінець, як в оправу, ввела,
І, як зорю ясну, вище хмар піднесла.
І на злість ворогам засіяла вона,
Як алмаз дорогий, як та зоря ясна.
І сіятиме вік, поки сонце стоїть,
І лихим ворогам буде очі сліпить.
Хай же ті вороги поніміють скоріш,
Наша ж мова сія щогодини ясніш!
Хай коштовним добром вона буде у нас,
Щоб і сам здивувавсь у могилі Тарас,
Щоб, поглянувши сам на створіння своє,
Він побожно сказав: «Відкіля нам сіє?!»
(BlogGood.ru) Наверх
Вот и все! Удачи вам!
Подписывайтесь на обновления моего блога BlogGood.ru!
Источник: bloggood.ru