кнопка топ прокрутка вверх

Обратите внимание, что кнопка Вверх имеет ссылку с якорем #top, которая является ID тега body. В принципе для jQuery такого не нужно, но если у пользователя не поддерживается javascript, то это своеобразный резерв - прокрутка произойдет и в этом случае, но только без анимации.

<script>$(document).ready(function(){    // hide #back-top first    $("#back-top").hide();        // fade in #back-top    $(function () {        $(window).scroll(function () {            if ($(this).scrollTop() > 100) {                $('#back-top').fadeIn();            } else {                $('#back-top').fadeOut();            }        });        // scroll body to 0px on click        $('#back-top a').click(function () {            $('body,html').animate({                scrollTop: 0            }, 800);            return false;        });    });});</script>

Ниже приведен javascript код, который можно вставить в любое место на странице. На начальном этапе он осуществляет скрытие элемента #back-top (в демо это тег <p id="back-top">). Далее скрипт сравнивает положение скроллбара окна (scrollTop) со значением 100, если больше 100, то кнопка исчезает, иначе появляется. Далее функция по клику, если сделан клик по ссылке #back-top, то произойдет анимированная прокрутка body scrollTop вверх к 0.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Подключаем сначала jQuery:

#back-top {    position: fixed;    bottom: 30px;    margin-left: -150px;}#back-top a {    width: 108px;    display: block;    text-align: center;    font: 11px/100% Arial, Helvetica, sans-serif;    text-transform: uppercase;    text-decoration: none;    color: #bbb;    /* переход */    -webkit-transition: 1s;    -moz-transition: 1s;    transition: 1s;}#back-top a:hover {    color: #000;}/* иконка стрелки (тег span) */#back-top span {    width: 108px;    height: 108px;    display: block;    margin-bottom: 7px;    background: #ddd url(up-arrow.png) no-repeat center center;    /* круглые углы */    -webkit-border-radius: 15px;    -moz-border-radius: 15px;    border-radius: 15px;    /* переход */    -webkit-transition: 1s;    -moz-transition: 1s;    transition: 1s;}#back-top a:hover span {    background-color: #777;}

    <p id="back-top">        <a href="#top"><span></span>Вверх</a>    </p>

Объявим элемент #back-top с position:fixed, он будет зафиксирован на странице. SPAN тег необязателен. Но мы добавили span тег для отображения стрелки графически (ввиде картинки). Также был добавлен переход в 1 секунду, чтобы создать эффект затухания при наведении мыши.

Простая реализация на jQuery анимированной прокрутки вверх страницы. Код проверяет положение скроллбара, если значение выше заданного, то кнопка прокрутки скрывается, иначе появляется кнопка, при нажатии на которую происходит прокрутка страницы в самый верх.

Анимированная прокрутка вверх

Загрузка. Пожалуйста, подождите...

Анимированная прокрутка вверх » Скрипты для сайтов