Кнопка «Наверх» для сайта

Недавно искал информацию, как реализуется кнопка наверх для сайта — очень удобно, когда много текста на странице, и чтобы не прокручивать страницу обратно, просто нажать на кнопку и попасть в начало страницы. И вот нашел один способ, которым хочу с Вами поделиться.

Кнопка наверх для сайта без плагина

Оказалось все очень просто.

1. Подключаем к сайту библиотеку jQuery

Для этого вставляем между тегами «head» в header.php код:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>  

2. Откройте в Блокноте любой файл скрипта (с расширением .js), который содержится в шаблоне и уже подключен к сайту. И добавьте в него код:

(function($){
$(function(){
var e = $(".scrollTop");
var speed = 500;
e.click(function(){
$("html:not(:animated)" +( !$.browser.opera ? ",body:not(:animated)" : "")).animate({ scrollTop: 0}, 500 );
return false;
});
function show_scrollTop(){
( $(window).scrollTop()>300 ) ? e.fadeIn(600) : e.hide();
}
$(window).scroll( function(){show_scrollTop()} ); show_scrollTop();
});
})(jQuery)

3. Создадим картинку-спрайт при помощи он-лайн генератора css размером 50 на 100 пикселей. В верхней части нарисуем полупрозрачную стрелку, которая будет отображаться по умолчанию, а в нижней — непрозрачную, которая будет выводиться при наведении мыши. И сохраним ее в папку в теме оформления в формате png.

4. Пропишем стили в файл style.css вашей темы оформления

.scrollTop{  
    background:url(путь_до_файла/название_картинки.png) 0 0 no-repeat;  
    display:block; width:50px; height:50px;  
    position:fixed; bottom:10px; left:47%;  
    z-index:2000;  
}  
.scrollTop:hover { background-position:0 -58px; }

В зависимости от размера изображения меняются параметры width, height и background-position.

Если не хотите заморачиваться со спрайтами, то можно использовать параметр прозрачности. Тогда рисуем одну картинку с непрозрачной стрелкой 50х50, и код стиля будет выглядеть так:

.scrollTop{  
    background:url(путь_до_файла/название_картинки.png) 0 0 no-repeat;  
    display:block; width:50px; height:50px;  
    position:fixed; bottom:10px; left:47%;  
    z-index:2000;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
}  
.scrollTop:hover {opacity:1.0;
-moz-opacity:1.0;
filter:alpha(opacity=100);}

Результат будет, как у меня на блоге в правом нижнем углу.

Кнопка наверх для сайта при помощи плагина

А для ленивых умельцы сделали специальный простенький плагин, который проделывает всю операцию автоматически. Качаем Scroll to Top, устанавливаем и активируем. Кнопка наверх для сайта появится автоматически. Текст можно поменять в нас тройках плагина. Если не нравится стандартная кнопка, загрузите свою картинку в папку «image» под именем «up.png».





И еще один плагин — похожий, но более продвинутый и гибкий — Dynamic to Top

За идею спасибо wp-kama.ru

Поделись этой статьей с друзьями!

Это будет интересно прочитать:

  • Надо же, раньше даже не задумывалась о такой функции. А ведь, действительно, очень удобно просто нажимать на кнопку, когда на странице много текста. Что только не придумают. 😀

  • Прикольно. Я однажды опубликовала этот скрипт, а затем за мной подтянулись остальные. Специально смотрела всю выдачу. Теперь только у ленивого он не установлен.

  • Про любой файл скрипт не совсем поняла. Поясните, пожалуйста, куда можно конкретно вставлять этот код. Как раз искала подобную информацию про вставку кнопки без плагина.

  • Думаю, лучше вместо него поставить всплывающее окно с похожими записями.
    Например как в этом сайте it-like.ru/novyie-zakladki-dlya-lyubogo-brauzera/ если прокрутить вниз появиться окошко.

  • А мне наоборот такое решение не под душе, лучше вывести похожие записи в другом месте (Сайтбар или футер). А прокрутка вверх очень удобна при больших статьях!

Добавить комментарий