Как сделать анимированный скроллинг наверх страницы сайта

Admin JavaScript Обсудить

Как сделать анимированный скроллинг к верху страницы у себя на сайте. В статье приведён рабочий скрипт на 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;
    });
});

Размещаем его в папке для скриптов у себя на сайте. У меня он лежит в папке js шаблона сайта на WordPress. Подключаем его с помощью следующей команды:

<script src="/wp-content/themes/название_шаблона/js/scroll_up.js"></script>

Под ним же добавляем нашу кнопку (со стрелочкой вверх):

<a id="scroll_up">&#8593;</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 и ниже */
}

Работу данного скрипта можно увидеть на этом же сайте.

Метки:

Привет. Ты находишься на моём сайте. Я разработчик. Здесь я делюсь своими наработками и знаниями. Спрашивай в комментариях, если тебе что-то не понятно или пиши, если есть что добавить.

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

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

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи: "Как сделать анимированный скроллинг наверх страницы сайта"
Если вам нужно добавить участок кода ставьте его между тегами <code></code>