Как сделать анимированный скроллинг к верху страницы у себя на сайте. В статье приведён рабочий скрипт на jQuery.
Следующий JavaScript поместим в файл с названием scroll_up.js:
jQuery(document).ready(function(){
appear();
jQuery(window).scroll(function(){
appear();
});
function appear() {
// Расстояние от верха сайта, когда появится кнопка.
if (jQuery(this).scrollTop() > 500) {
jQuery('#scroll_up').fadeIn('');
} else {
jQuery('#scroll_up').fadeOut('');
}
};
jQuery('#scroll_up').click(function(){
// Время скроллинга страницы вверх в миллисекундах
jQuery('body').stop().animate({scrollTop: 0}, 600);
return false;
});
});
appear();
jQuery(window).scroll(function(){
appear();
});
function appear() {
// Расстояние от верха сайта, когда появится кнопка.
if (jQuery(this).scrollTop() > 500) {
jQuery('#scroll_up').fadeIn('');
} else {
jQuery('#scroll_up').fadeOut('');
}
};
jQuery('#scroll_up').click(function(){
// Время скроллинга страницы вверх в миллисекундах
jQuery('body').stop().animate({scrollTop: 0}, 600);
return false;
});
});
Размещаем его в папке для скриптов у себя на сайте. У меня он лежит в папке js шаблона сайта на WordPress. Подключаем его с помощью следующей команды:
<script src="/wp-content/themes/название_шаблона/js/scroll_up.js"></script>
Под ним же добавляем нашу кнопку (со стрелочкой вверх):
<a id="scroll_up">↑</a>
Хотя скрипт и небольшой, но далеко не самый важный чтобы грузить его в первую очередь. Помещаем наш скрипт в самый низ сайта, в файл footer.php.
CSS для кнопки скроллинга
Описываем стиль для #scroll_up:
/* SCROLL UP */
a#scroll_up {
bottom: 20px;
position: fixed;
right: 10px;
vertical-align: top;
color: #FFFFFF;
background-color: #226788;
opacity: 0.5;
filter:alpha(opacity=50); /* Для IE8 и ниже */
border-radius: 3px;
padding: 2px 12px;
text-decoration: none;
font-size: 20px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a#scroll_up:hover {
opacity: 1;
filter:alpha(opacity=100); /* Для IE8 и ниже */
}
a#scroll_up {
bottom: 20px;
position: fixed;
right: 10px;
vertical-align: top;
color: #FFFFFF;
background-color: #226788;
opacity: 0.5;
filter:alpha(opacity=50); /* Для IE8 и ниже */
border-radius: 3px;
padding: 2px 12px;
text-decoration: none;
font-size: 20px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a#scroll_up:hover {
opacity: 1;
filter:alpha(opacity=100); /* Для IE8 и ниже */
}
Работу данного скрипта можно увидеть на этом же сайте.
