поделись в соц. сети:

19 марта 2013 г.

Как установить кнопку "Вверх" для своего сайта?

Кнопка вверх

В этом уроке:

  1. Устанавливаем кнопку "Вверх";
  2. Подгоняем расположение под свой сайт;
  3. Изменяем внешний вид.



В качестве примера, справа внизу при скроллинге страницы вниз появляется кнопка "Вверх".

Демо на jsbin.com | Скачать

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.ico" />
<meta name="keywords" content="" />
<meta name="description" content="" />

<title>Как установить кнопку "Вверх" для Вашего сайта?</title>

<!-- Your styles -->
<link rel="stylesheet" href="styles/style.css" />

<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

</head>
<body>
    <pre>
        ...
    </pre>
    <div id="back-top"><a href="#top" class="arrow" title="Вверх"><span></span></a></div>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="scripts/jquery.up.js"></script>
</body>
</html>
/* styles/style.css */

#back-top {
    z-index:9999;
    position:fixed;
    bottom:20px;
    right:20px;
}

.arrow {
    display:inline-block;
    position:relative;
    text-indent:-9999px;
    width:60px;
    height:60px;
    background:url(//lh4.googleusercontent.com/--Ob3aXKIKwI/UT8RmNYIjXI/AAAAAAAAB9c/RHLsChYm7wY/s120/Arrow_Up_sprite.png) no-repeat;
}

.arrow span {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background:url(//lh4.googleusercontent.com/--Ob3aXKIKwI/UT8RmNYIjXI/AAAAAAAAB9c/RHLsChYm7wY/s120/Arrow_Up_sprite.png) no-repeat;
    background-position:-60px 0;
}
/* scripts/jquery.up.js */

$(document).ready(function() {

    $("#back-top").hide();

    $(function() {
        $(window).scroll(function() {
            if ($(this).scrollTop() > 200) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        $('#back-top a').click(function() {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });

        $(".arrow").find("span").hide().end().hover(function() {
            $(this).find("span").stop(true, true).fadeIn();
        }, function() {
            $(this).find("span").stop(true, true).fadeOut();
        });

    });

});

В предыдущих уроках я рассказывал про то:
Как установить кнопки социальных сетей Yandex.Share?
Как изменить внешний вид иконок Yandex.Share?
Как установить боковую панель с кнопками социальных сетей Yandex.Share?