Четверг, 17 Января 2013 09:48

Реализация перехода наверх страницы

Written by 
Оцени эту запись
(1 Голос)
 

В данной статье мы реализуем ссылку вида "Наверх" или "ToTop" при помощи HTML. Для этого нам нужно два элемента - элемент с определенным идентификатором id и ссылка с атрибутом href вида #id.

 

Элемент с идентификатором должен находиться в том месте, куда нужно совершить переход, а ссылка там, откуда этот переход будет сделан.

 

Так может выглядеть наш переход:

 

 

<div id="top">Top</div> /*элемент может быть пустым*/
 
 
А так должна в данном случае выглядеть наша ссылка:

 

<a href="#top">To Top</a>

 

 

При нажатии на ссылку вы увидите прокрутку страницы так, что элемент id="top" окажется на самом верху страницы. Для проверки этого прокрутите в самый конец статьи и нажмите на ссылку "To Top", вы перейдете на начало статьи.

 

Еще один способ применения подобных анкоров - это оглавление длинной статьи. В начале статьи вы пишите список пунктов, которые буду раскрыты в данной статье:

 

  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4

 

Каждый пункт делаете ссылкой, например:

 

 

<ul>
<li><a href="#p1">Пункт 1</a></li>
<li><a href="#p2">Пункт 2</a></li>
<li><a href="#p3">Пункт 3</a></li>
<li><a href="#p4">Пункт 4</a></li>
</ul>

 

Далее пишете свою статью по этим пунктам и перед началом каждого их них ставите элемент с соответствующим идентификатором:

 
 
<div id="p1"></div>

 

Рабочий пример:

 

 

 

 

Пункт 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

 

 

Пункт 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

 

 

Пункт 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

 

 

Пункт 4

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

 

Если вы кликните в списке на ссылку "Пункт 3", то страница сайта прокрутится так, что заголовок Пункт 3 окажется сверху страницы.

 

 

А теперь ссылка "To Top" для проверки прокрути наверх страницы:

 

To Top

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов