Навигация по странице и кнопка «наверх» для сайта

Содержание статьи:

Подключение скриптов.
Реализация переходов.
Перемотка к началу.
Комментарии.

Оглавление помогает быстро сориентироваться на странице, а если есть навигация по странице – возможность сразу перейти на нужный абзац, то вообще избавляемся от просмотра ненужной информации, экономя время. Несложно сделать оглавление статьи используя CSS, сделать реалистичным с помощью скрипта, а после без труда реализуется кнопка наверх для сайта.

Для этого нужно на странице разместить якоря, сделать на них ссылки используя идентификаторы id (что позволяет спецификация CSS3), и использовать один из способов реалистичной (замедленной) прокрутки страницы по пунктам содержания статьи (с возможностью учесть фиксированную шапку сайта). Одновременно устанавливается кнопка наверх для сайта, клик по которой переместит пользователя вверх страницы (к тому же оглавлению).

Подключение скриптов

Если ещё не подключена библиотека jQuery, перед закрывающим тегом </head> разместим код подключения и здесь же размещаем скрипт, замедляющий прокрутку страницы (работать будет, но если есть возможность, для оптимизации сайта – лучше разместить их отдельными файлами в папке с js):

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js".><!--ссылка на библиотеку jQuery--></script>

<script type="text/javascript"><!скрипт прокрутки страницы-->

        $(document).ready(function(){

                $("a[href*=#]").bind("click", function(e){

                        var anchor = $(this);

                        $('html, body').stop().animate({

                                scrollTop: $(anchor.attr('href')).offset().top-30 /* -30 – можно менять для учёта фиксированной шапки*/

                        }, 1000); /* 1000 – можно менять для желаемой скорости прокрутки*/
 
                        e.preventDefault();

                        return false;

                });

        });

</script>

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

Реализация переходов

После подключения библиотеки и скрипта в начале статьи пишем список якорных ссылок с необходимым нам количеством пунктов содержания:

<p class="table_of_contents">Содержание статьи:</p>

<ol class="table_of_contents">

        <li><a href="#1"></a>пункт содержания статьи 1</li>

        <li><a href="#2"></a>пункт содержания статьи 2</li>

        <li><a href="#3"></a>пункт содержания статьи 3</li>

</ol>

Для оформления списка в файл CSS добавим код, на пример такой:

.table_of_contents {

        color : #fb0472;

        margin : 15px 0;

}

Или меняем его на своё усмотрение, здесь просто задали цвет и отступы сверху и снизу.

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

<span id="1"></span>
<span id="2"></span>
<span id="3"></span>

Тег <span> здесь использован только для того, чтоб не обременять идентификатором <h2>подзаголовок</h2>. Вместо тега <span> идентификатор id="#" можно присвоить уже присутствующему в тексте тегу – подзаголовку <h…> или просто параграфу <p>.
Навигация по статье готова.

Перемотка к началу

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

Сразу за тегом <body> используем уже имеющийся идентификатор, если его нет – разместим свой якорь:

<span id="top_page"></span>

А перед закрывающим тегом </body> поставим ссылку на него:

<a class="topbutton" href="#top_page " title="Вернуться к началу">Наверх</a>

Для оформления кнопки в файл CSS добавим код, на пример такой:

.topbutton {

        background : #f8f8f8;

        border : #6a6868 3px solid;

        border-radius : 7px;

        bottom : 60px;

        color : #6a6868;

        font-size : 140%;

        padding : 8px;

        position : fixed;

        right : 60px;

        text-align : center;

        z-index : 100;

}

После добавления кода в нижнем правом углу экрана появится кнопка – надпись «наверх» внутри скруглённой рамки. При клике на неё страница отмотается вверх. Здесь приведён простейший пример кнопки, она меняется на своё усмотрение.

Важно: Ситуации, когда отключен js, или не успевает загрузиться jQuery компенсируются тем, что навигация по странице, и кнопка наверх для сайта реализованные якорными ссылками, работают даже без использования библиотеки и скрипта замедляющего прокрутку, но переходы происходят молниеносно быстро и незаметно для пользователя.

Отредактировано: 30.12.2016 11:03:48

Навигация по странице и кнопка «наверх» для сайта

Подключение скриптов

Реализация переходов

Перемотка к началу

Комментарии (1):

сделать заказ