Регистрация Войти
Войти через VK Войти через Яндекс

Поиск по сайту

Наш Telegram бот: @htmlweb_bot

Кнопка для прокрутка страницы вверх

Прокрутка вверх на чистом HTML + CSS

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

<body id="top">
...
<a href="#top" style="position:fixed;bottom:30px;right:30px">Наверх</a>

Вы получите в правом нижнем углу кнопку следующего вида:

Наверх

Давайте сделаем её немножко симпатичнее, добавив стили:

<a href="#top" style="display:inline-block;position:fixed;
        /*положение кнопки*/
        bottom:30px;right:30px;
         /*оформление кнопки*/
        padding:5px 10px;font-size:16px;
        background:#ddd;
        border-radius:15px">Наверх</a>

Получится вот такая кнопочка:

Наверх

Прокрутка вверх на HTML + CSS + JavaScript

Если нет возможности поставить анкор у одного из верхних элементов, можно использовать следующий код для прокрутки окна в начало страницы:

<span onclick="window.scrollTo(0,0);return!1;">Наверх</span>

Если Вы хотите сделать медленную прокрутку страницы вверх, придется немножно поколдовать:

<script>
function ScrollUp(){
    var t,s;
    s=document.body.scrollTop||window.pageYOffset;
    t=setInterval(function(){if(s>0)window.scroll(0,s-=5);else clearInterval(t)},5);
}
</script>
<a href="#top"
   onclick="ScrollUp();return!1;"
   style="display:inline-block;position:fixed;
        /*положение кнопки*/
        bottom:10px;right:10px;
         /*оформление кнопки*/
        padding:5px 10px;font-size:16px;
        opacity:0.7; /*добавим прозрачности*/
        background:#ccc;
        border-radius:15px">Наверх</a>

Результат Вы видите на странице справа внизу

Наверх

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

Для тех, кто жить не может без jQuery, привожу наиболее простой и популярный на просторах интернета код:

<style>
    /*Back to top button */
    #back-top{
        position:fixed;
        bottom:30px;
        right: 60px;  /*смещение на середину экрана*/
        display: none; /*сначала скроем её*/
    }
    #back-top a{
        width:64px;
        display:block;
        text-align:center;
        font:11px/100% Arial, Helvetica, sans-serif;
        text-transform:uppercase;
        text-decoration:none;
        color:#bbb;
        /*при наведении мышки меняем фон медленно*/
        transition:1s;
    }
    #back-top a:hover{
        color:#000;
    }
    #back-top span{
        width:64px;
        height:64px;
        display:block;
        margin-bottom:7px;
        background:#ddd url(images/up-arrow1.png) no-repeat center center;
        border-radius:15px;
        /*при наведении мышки меняем фон медленно*/
        transition:1s;
    }
    #back-top a:hover span{background-color:#777}
</style>

<script type="text/javascript">
    $(document).ready(function(){
        // прячем кнопку #back-top
        $("#back-top").hide();

        // появление/затухание кнопки #back-top
        $(function (){
            $(window).scroll(function (){
                if ($(this).scrollTop() > 100){
                    $('#back-top').fadeIn();
                } else{
                    $('#back-top').fadeOut();
                }
            });

            // при клике на ссылку плавно поднимаемся вверх
            $('#back-top a').click(function (){
                $('body,html').animate({
                    scrollTop:0
                }, 800);
                return false;
            });
        });
    });
</script>

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

Вверх

.
Прокомментировать/Отблагодарить