Давно хотел себе на сайт такую штучку, как ссылка «Наверх», которая появляется когда мы начинаем крутить колесико мышки и плюс нажатие на ссылку выполняло бы плавное прокручивание контента до начала страницы. Вас также может заинтересовать как сделать плавную прокрутку для содержания страницы, но пока о прокрутке к шапке страницы.
Древность
Раньше пользовался простым методом когда нажатие на ссылку приводило просто к мгновенному поднятию к шапке сайта, вот таким кодом:
<a href="#">Go 2 Top</a>
Шаг вперед
Но все-таки хочется плавной прокрутки, поэтому создадим файл htm-gtt.js
откроем его программкой Notepad++ и вставим следующий код:
$(document).ready(function() { $('a[href=#top]').click(function(){ $('html, body').animate({scrollTop:0}, 'slow'); return false; }); });
Теперь Вам нужно подключить вызов этого скрипта в шапке документа
/*Подключаем библиотеку jQuery через Google API*/ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> /*Подключаем наш скрипт*/ <script type="text/javascript" src="http://ваш-сайт.com.ua/ja/htm-gtt.js"></script>
Допустим Вы не хотите создавать отдельный файл, тогда можно просто подключить скрипт между тегами <head></head>
$(document).ready(function() { $('a[href=#top]').click(function(){ $('html, body').animate({scrollTop:0}, 'slow'); return false; }); }); </head>
Так скрипты подключены, теперь нужно в подвале сайта вывести нашу ссылочку:
<a href="#top" title="Go to Top">Go 2 Top</a>
Пример Вы можете увидеть на моем сайте в правом нижнем углу ссылка «Наверх».
Perfect
Эх все бы круто, но еще же хочется, чтобы ссылочка например появлялась в правом или левом нижнем углу, только тогда когда мы прокрутили колесико мышки хотя бы пикселей на 100.
Создадим абзац с нашей ссылкой «Наверх»
<p style="display: block;" id="go-to-top"> <a href="#top">Go to top</a> </p>
Зададим стилей нашей ссылке «Наверх»
/* go to top */ #go-to-top { position: fixed; bottom: 0; margin-left: -220px; width: 100px; text-align: right; clear: both; } #go-to-top a { color: #ada597; text-transform: uppercase; text-decoration: none; -webkit-transition: background-color .7s; -moz-transition: background-color .7s; -o-transition: background-color .7s; transition: background-color .7s; } #go-to-top a:hover { color: #615349; }
Все таки jQuery радует (заменяем содержимое файла htm-gtt.js слудеющим кодом):
$(document).ready(function(){ /*Для начала скроем блок с нашей ссылкой*/ $("#go-to-top").hide(); $(function () { $(window).scroll(function () { /*Отслеживаем событие мыши и задаем условие, что если прокрутили контент на 100px то блок с ссылочкой нужно отобразить*/ if ($(this).scrollTop() > 100) { $('#go-to-top').fadeIn(); } else { $('#go-to-top').fadeOut(); } }); /*Ну и наше плавное перемещение вверх*/ $('#go-to-top').click(function () { $('body,html').animate({scrollTop: 0}, 800); return false; }); }); });
Мне очень нравится этот эффект, если у Вас что-то не получается задавайте вопросы в комментариях.
кстати, очень много я искал подобное решение, пытался сам кинопоисовский скрипт переписывать — но ничего не получалось. только у вас нашел хорошее решение. подскажите, как ее модиф. как на кинопоиске.спасибо
Совершенно ничего не понял. Можно было бы и понятней описать этот процесс. Не все же программисты с опытом. Неуже ли нельзя описать процесс создания этой прокрутки: «создайте файл пшп, положите его в корень……»
den, потому что скрипта там пара строк, реализацию можешь понаблидать на этом блоге, при прокрутке меню закрепляется и в нем появляется стрелка наверх
Почему нельзя выложить, уже готовый материал, как у ВАс на других статьях. Скачать. ???
Вадим, не знаю че у Вас не работает, скорей всего ошибка в файле который получаете методом GET, а в целом сечас занимаюсь редизайном и у меня все работает:
в файл functions.php:
а в файле include.js такие штуки:)
#go_top
— это id ссылки наверхWordPress 3.6 не работает, согласно непонятных косяков 3.6 и jQuery
Во первых если посмотреть консоль хрома
сайт выдает ошибку GET http://сайт.com/wp-includes/js/jquery/jquery-1.10.2.min.map 404 (Not Found)
когда скачиваешь и кладешь этот файл
другая ошибка говорит
Uncaught TypeError: Property ‘$’ of object [object Object] is not a function сайт.com/:171
(anonymous function) сайт.com/:171
c jquery.js:7341
p.fireWith jquery.js:7403
b.extend.ready jquery.js:6875
H
Когда заменяешь код, так как он хочет, просто не работает:
там на форуме вордпреса бурная дискуссия по поводу WP3.6 и jQuery
но решения я так и не увидел
Я не люблю «приклеенные» элементы с position:fixed (с точки зрения пользователя), они отвлекают внимание при скроллинге. Да и кнопку home на клаве никто не отменял.
Да и кстати совсем забыл про такие волшебные кнопки на клавиатуре как «Home» и «End» — нажали «Home» и попали наверх страницы, нажали «End» — в подвал страницы