ЭНЦИКЛОПЕДИЯ СОВРЕМЕННОГО САЙТОСТРОЕНИЯ

Как сделать кнопку «Наверх»?

Тема в разделе "Другие вопросы по созданию сайта", создана пользователем Пальмира, 11 окт 2017.

  1. Пальмира

    Пальмира Новичок

    Сообщения:
    2
    Рейтинг:
    1
    Кнопка «Наверх» является неотъемлемым атрибутом качественного сайта. Её можно сделать в разных вариациях, но желательно в виде собственно кнопки. Кнопка «Наверх» привязывается к определённому месту на экране, например правый верхний угол.

    Напишем код:

    Код:
    <div id="top"></div>
    
    <!—Так необходимый для каждого сайта океан контента -->
    
    <a href="#top">Наверх</a>
    При нажатии на ссылку нас перенесёт на элемент, в котором наличествует id="top", а именно div на представленном куске коде. Если он расположен непосредственно после body, то это и получиться верх нашей страницы.

    Существует более удобный и короткий в написании способ, но с использованием JavaScript:

    Код:
    <a href="javascript:scroll(0,0);">Наверх</a>
    Как и в первом случае, при нажатии переходим к верху страницы. Плюсом является то, что отсутствует необходимость создавать пустые div с нужным id, соответственно написанный код выходит короче. Минусом является необходимость JavaScript, который расшифровывают не все браузеры.
     
    #1
  2. Kucheryaviy_e

    Kucheryaviy_e Веб-мастер

    Сообщения:
    100
    Рейтинг:
    41
    Род занятий:
    Копирайтер, web-программист
    Откуда:
    Россия
    Можно ещё анимацию прикрутить на jQuery.
    Код:
    $(document).ready(function() {
    $("a.scrollto").click(function() {
    var elementClick = $(this).attr("href");
    var destination = $(elementClick).offset().top;
    jQuery("html:not(:animated),body:not(:animated)").animate({
    scrollTop: destination
    }, 800);
    return false;
    });
    });
    HTML:
    <h1 id="m1">Текст</h1>
    <a href="#m1" class="scrollto">ВВЕРХ</a>
    
     
    #2