Давно хотел себе на сайт такую штучку, как ссылка «Наверх», которая появляется когда мы начинаем крутить колесико мышки и плюс нажатие на ссылку выполняло бы плавное прокручивание контента до начала страницы. Вас также может заинтересовать как сделать плавную прокрутку для содержания страницы, но пока о прокрутке к шапке страницы.
Древность
Раньше пользовался простым методом когда нажатие на ссылку приводило просто к мгновенному поднятию к шапке сайта, вот таким кодом:
<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:
function htm_scripts(){ wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', get_template_directory_uri() . 'js/jquery-1.8.2.min.js' ); wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'include', get_template_directory_uri() . 'js/include.js', array(), '1.0', true ); } add_action( 'wp_enqueue_scripts', 'htm_scripts' );а в файле include.js такие штуки:)
(function($){ $.fn.exists = function(){ return $(this).length; } if($('#go_top').exists()) { $('#go_top').on('click',function(){ $('body,html').animate({scrollTop: 0}, 800); return false; }); } })(jQuery)#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
Когда заменяешь код, так как он хочет, просто не работает:
<!-- Плавная прокрутка к id #якорю --> jQuery(document).ready(function($) { $('a[href=#top]').click(function(){ $('html, body').animate({scrollTop:0}, 'slow'); return false; }); }); <!-- Плавная прокрутка к id #якорю -->там на форуме вордпреса бурная дискуссия по поводу WP3.6 и jQuery
но решения я так и не увидел
Я не люблю «приклеенные» элементы с position:fixed (с точки зрения пользователя), они отвлекают внимание при скроллинге. Да и кнопку home на клаве никто не отменял.
Да и кстати совсем забыл про такие волшебные кнопки на клавиатуре как «Home» и «End» — нажали «Home» и попали наверх страницы, нажали «End» — в подвал страницы