Скрипт кнопки «Наверх»


Сейчас уже модно улучшать юзабилити сайтов, добавляя к ним всякие разные фичи. Это не только правило хорошего тона при общении с пользователями, но и требование поисковых систем, которые «за» удобные сайты с «интуитивно понятной навигацией».

На многих сайтах уже имеется кнопка «Наверх», которая появляется после того, как пользователь «проскролит» страницу вниз на определенное количество пикселей. Клик по кнопке позволяет посетителю быстро вновь подняться вверх и получить доступ к основному меню и шапке сайта. Многие к этому привыкли и активно ею пользуются. Вы можете разместить подобную кнопку и у себя на сайте, добавив к нему совсем немного кода.

Добавим в «подвал» сайта короткий код js и html-код самой кнопки:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript"> 
jQuery(document).ready(function(){
    jQuery(window).scroll(function () { 
    if (jQuery(this).scrollTop() > 100) jQuery('a#scroll_up').fadeIn();  
    else jQuery('a#scroll_up').fadeOut(400);  
    }); 
    jQuery('a#scroll_up').click(function () { 
    jQuery('body,html').animate({  
        scrollTop: 0 
        }, 800);  
        return false; 
    }); 
});
</script>
<a id="scroll_up" href="#">Вверх</a>

Пока пользователь не проскроллит 100 пикселей, кнопка не будет видна. Помимо этого кода нам нужно добавить css-стили для кнопки:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
a#scroll_up {
    position: fixed;
    top: 95%;
    right: 40px;
    display: none;
    width: 90px;
    height: 21px;
    text-align: center;
    font: 12px Verdana;
    text-decoration: none;
    color: #fff;
    background: #3b9cc9;
    padding-top: 5px;
    opacity: 0.9;
    filter: alpha(opacity=90);
}

Целесообразно поместить эти стили в общий css-файл, чтобы все было в одном месте. Либо добавьте их в хэдер ваших страниц между тегами style:

1
2
3
<style>
...
</style>

Также нужно помнить, что скрипт работает на jQuery, а это значит, что библиотека должна быть подключена выше вставляемого js-кода.





Другие посты

Категория: jQuery

Оставить комментарий