Прокрутите вверх, используя jQuery (время установки: 2 минуты)

Это быстрый шаг за шагом, чтобы настроить прокрутку наверх для вашего сайта. Для демонстрации просто прокрутите вниз на этом сайте.

1. Загрузите плагин scrollTo , включите его.
2. Получить изображение ( стрелка или что-то подобное).
3. Включите немного HTML ниже.
4. Включите некоторые jQuery / JavaScript ниже, чтобы поймать прокрутку окна и обработать отображение изображения.
5. Вот и все!

HTML

JQuery

Просто немного jQuery, чтобы показать изображение, когда пользователь прокручивает вниз, и скрывать, когда он прокручивает вверх, и обрабатывать событие click.

 $(document).ready(function()
{
    var $scrollTop = $('#scroll-to-top');

    $(window).scroll(function()
    {
        //scroll top top
        if ($(this).scrollTop() > 100)
        {
            $scrollTop.fadeIn(1000);
        }
        else
        {
            $scrollTop.hide();
        }
    });

    $scrollTop.bind('click', function(e)
    {
        e.preventDefault();
        $.scrollTo(0, 1000);
    });
});

Примечание: если вы хотите кросс-браузерное решение, просто используйте это:

 window.scrollTo(0,0); //chrome scroll to top bugfix

CSS

Просто несколько простых CSS для обработки показа изображения и непрозрачности браузера.

 #scroll-to-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: none;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
#scroll-to-top:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    -khtml-opacity: 1.0;
    opacity: 1.0;
}