Страница 1 из 2

Кнопка Наверх

Добавлено: 11 сен 2011, 15:10
Александр
Кнопка Наверх
JavaScript, Jquery, HTML, CSS

В этом уроке вы узнаете как сделать на своём сайте плавающую кнопку "Наверх" как ВКонтакте. При нажатии на кнопку, страница плавно прокрутится вверх.
Так же в уроке описан способ добавления кнопки в блог на Wordpress.

Пример работы скрипта http://flapps.ru/example/jquery/scroll- ... o-top.html

1. Скачиваем плагин для jQuery - jQuery.ScrollTo
Заходим на страницу http://flesler.blogspot.com/2007/10/jqueryscrollto.html и находим Downloads. Нужно скачать jQuery.ScrollTo Minified(recommended)
В сжатом виде этот плагин весит всего 2кб.
Плагин ScrollTo нужен для плавной прокрутки окна.


2. Код html страницы

Код: Выделить всё

<!doctype html><html><head><title>Скрипт плавающей кнопки «Наверх»</title><script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script><script type="text/javascript" src="js/jquery.scrollTo-min.js"></script><script type="text/javascript" src="js/scrollToTop.js"></script><link href="style.css" rel="stylesheet" type="text/css" /> </head><body><div id="top"></div> <h1>Скрипт плавающей кнопки Наверх.</h1><p style="margin-bottom:70%;">Крути вниз!</p><p>Справа внизу должна появится кнопка «Наверх»</p><p style="margin-bottom:70%;"><a href="http://flapps.ru">http://flapps.ru</a></p><p>Низ страницы</p> <div id="scrollToTop"><a href="#top" id="toTopLink">Наверх</a></div> </body></html>
В этом коде мы подключаем jQuery, скаченный ранее плагин scrollTo-min.js и scrollToTop.js - в котором будет основной код скрипта.

Для того чтобы скрипт работал, надо в начале страницы вставить код

Код: Выделить всё

<div id="top"></div>
а в конце страницы вставить код

Код: Выделить всё

<div id="scrollToTop"><a href="#top" id="toTopLink">Наверх</a></div> 
Файлы scrollTo-min.js и scrollToTop.js должны быть в папке js.
Файл style.css - оформление кнопки Наверх. Файл должен находится в одной папке с html файлом.


3. Код скрипта scrollToTop.js

Код: Выделить всё

$(function () {    var scroll_timer;    var displayed = false;    var $message = $('#scrollToTop');    var $window = $(window);    // узнаём позицию блока #top    var top = $(document.body).children(0).position().top;     // функция при прокрутке    $window.scroll(function () {        window.clearTimeout(scroll_timer);        scroll_timer = window.setTimeout(function () { // используем таймер            if($window.scrollTop() <= top+200) // скрываем, если позиция блока #top и текущий вид окна совпадают. +200 - для того чтобы показывать кнопку Наверх как минимум при прокрутке окна вниз на 200 пикселей            {                displayed = false;                $message.fadeOut(500);            }            else if(displayed == false) // показываем кнопку «Наверх»            {                displayed = true;                $message.stop(true, true).fadeIn(500).click(function () { $message.fadeOut(500); });            }        }, 100);    });        // клик по кнопке наверх    $('#scrollToTop').click(function(e) {         e.preventDefault();        $.scrollTo(0,300);        });});

4. Код файла стилей style.css

Код: Выделить всё

#scrollToTop {    display: none;     z-index: 999;    opacity: .6;        position: fixed;    top: 100%;    right: 20px;    margin-top: -50px;    margin-left: -80px;        -moz-border-radius: 6px;    -webkit-border-radius: 6px;    border-radius: 6px;        width: 70px;    line-height: 16px;    height: 16px;    padding: 10px;    background-color: #000;    text-align: center;    cursor:pointer;} #scrollToTop a {    font-family:Arial, Verdana, sans-serif;    font-size:12px;    color:#fff;}

5. Скрипт готов!

Исходник http://flapps.ru/example/jquery/scroll- ... to-top.rar


Добавление кнопки «Наверх» в блог на WordPress

1. Заходим в папку /wp-content/themes/НАЗВАНИЕ/
- в папку js копируем файлы scrollTo-min.js и scrollToTop.js
- в файл style.css добавляем стиль кнопки описанный выше

2. В файл header.php между <head></head> добавляем код

Код: Выделить всё

<script src="http://code.jquery.com/jquery-1.6.3.min.js" type="text/javascript"></script><script type="text/javascript" src="/wp-content/themes/НАЗВАНИЕ/js/jquery.scrollTo-min.js"></script><script type="text/javascript" src="/wp-content/themes/НАЗВАНИЕ/js/scrollToTop.js"></script>
Сразу после <body> добавляем

Код: Выделить всё

<div id="top"></div>
3. В файл footer.php прямо перед </body> добавляем

Код: Выделить всё

<div id="scrollToTop"><a href="#top" id="toTopLink">Наверх</a></div>
4. Закачиваем файлы header.php и footer.php
Всё готово.

Re: Кнопка Наверх

Добавлено: 13 апр 2012, 20:14
philipp
Спасибо, протестировал. Все работает!

Re: Кнопка Наверх

Добавлено: 29 май 2012, 09:23
coka1n
Спасибо)

Re: Кнопка Наверх

Добавлено: 24 июн 2012, 16:30
volk007
А у меня почему то не выводится эта кнопка(

Re: Кнопка Наверх

Добавлено: 25 июн 2012, 21:44
Александр
volk007
Пример не работает или уже в другом коде?

Re: Кнопка Наверх

Добавлено: 25 дек 2012, 16:35
Chianuk
Доброго времени суток. Работает в Firefox, Chrome. Но, ни в какую не работает в IE. Устал бороться. Как починить? Спасибо.

Пример с вашего сайта тоже в IE не работает. :(

Re: Кнопка Наверх

Добавлено: 25 дек 2012, 21:39
Александр
Chianuk
Надо прописать доктайп

Код: Выделить всё

<!doctype html><html>...

Re: Кнопка Наверх

Добавлено: 25 дек 2012, 22:59
Chianuk
Прописано:

Код: Выделить всё

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Re: Кнопка Наверх

Добавлено: 25 дек 2012, 23:10
Александр
Chianuk
doctype должен быть правильным, иначе браузер будет работать в режиме Quirks mode, как и без указания доктайпа.

Код: Выделить всё

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Если разработка изначально велась с неправильным доктайпом, то после его изменения следует проверить корректность отображения верстки и работу всех остальных скриптов.

Re: Кнопка Наверх

Добавлено: 26 дек 2012, 00:07
Chianuk
ОК. Движок готовый, бесплатный. И были уже проблемы у меня, когда нужные мне скрипты не работали. А при изменении доктайпа к нужному виду - движок несло. Попробую покрутить. Спс.