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

👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

На многих сайтах часто присутствует ссылка, перемещающая вас наверх страницы. Это бывает удобно, а иногда и просто необходимо, так как большинство элементов управления традиционно находятся в верхней части сайта. И так как прокручивать длинные страницы не всегда удобно, то легче, дойдя до конца, просто нажать на кнопку, сразу перемещающую к началу страницы. Я раньше пользовался плагином WP To Top, который вставляет на любую страницу такую кнопку. Однако, чуть понабравшись опыта, все же решил, что слишком жирно будет для такой простой ссылки использовать целый плагин. чтобы экономить мощности блога, я решил вставить такую ссылку на страницы блога самостоятельно, тем более что ссылку можно вставить в любое место блога, а не только туда, куда позволяет плагин. И вот что у меня получилось.

tiaurus-0364

Сделал я такую ссылку универсальным, элегантным методом.В шапку блога (header.php) вставляем «якорь»:

<a name="#top"></a>

В подвал (footer.php) вставляем ссылку, клик по которой перебрасывает к «якорю»:

<a href="#top">наверх страницы</a>

Такая ссылка работает во всех браузерах. Вообще-то достаточно вставить ссылку только в подвал — она работает в любом браузере с поддержкой Java. Однако если Java отключен (такое тоже бывает, особенно на казенных компьютерах), то ссылка работать не будет. Поэтому для подстраховки в шапке и размещается стандартный «якорь», который будет вести к себе при отключенной Java-машине.

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий

  1. Иван

    А как же отношение браузеров к пустым якорям?
    Прочел тут: http://htmlcssjs.ru/HTML/?18

    Ответить
    1. Прочел там же:
      Хотелось бы указать ещё один способ установки ссылки «вверх страницы». Он основан на JavaScript и не вызывает никаких побочных эффектов:

      <a href="javascript:scroll(0,0)">вверх страницы</a>

      Здесь был использован метод window.scroll(x,y), который позволяет промотать страницу на указанное количество пискелов по горизонтали (x) и вертикали (y). Если мы обнулим эти два параметра, то будет восстановлен статус кво — страница проскролится в начало.
      Наиболее совместимым решением будет такой вариант:

      <a href="#" onClick="scroll(0,0); return false" title="наверх">вверх страницы</a>


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

      Ответить