"Стрелка вверх" с помощью jQuery

категория: jQuery
Столкнулся с такой не проблемой, а, скорее, с неудобством - все время мотать скролинг вверх к шапке сайта, а когда статья довольно длинная - то вообще бесит возвращаться к меню. Решений большая масса, но для себя я решил сделать "стрелочку вверх" с помощью jQuery. Сначала нужно скачать jQuery (http://jquery.com) и установить. Можно просто скачать и вставить в папку static/js, а потом подключить в head:
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.min.js"></script>
или сделать это с помощью django-jquery (http://pypi.python.org/pypi/django-jquery/1.8.1): 1. Набираем в терминале:
pip install django-jquery
2. добавляем его в settings.py:
INSTALLED_APPS = (
    # ...
    'django.contrib.staticfiles',
    'jquery',
    # ...
)
Далее скачиваем скрип jqueryarrow.js и изображение стрелочки, копируем и вставляем в папки со статикой, у меня это папки images и js, и вставляем в <head></head>:
<script type="text/javascript" src="{{ STATIC_URL }}/js/jqueryarrow.js"></script>
Теперь нужно заставить стрелочку работать. Вставляем скрипт в <head></head>:
<script type="text/javascript">
$(document).ready(function(){
    $.autoScroll({
        scrollDuration: 2000,
        showDuration: 400,
        hideDuration: 300
    });
});
</script>
Нужно написать для стрелочки стили, у меня получилось так:
.scroll-to-top-button {
    background: #fff url(images/Upload-icon.png) center no-repeat;
    width: 32px;
    height: 32px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    cursor: pointer;
    padding: 15px;
    margin: 20px;
}
Если кому-то не нравиться, как и мне, что стрелка справа, а не слева - то откройте скрипт jqueryarrow.js и поменяйте right: 0 на left: 0.


blog comments powered by Disqus