Главная » Языки программирования

Перейти в начало страницы html

Содержание
  1. Кнопка «Наверх» на странице сайта
  2. Как создать кнопку с помощью средств CSS
  3. Урок 27. Ссылка «Наверх страницы»

Кнопка «Наверх» на странице сайта

Если содержимое страницы сайта имеет достаточно большой размер по вертикали, то на странице обязательно должна присутствовать кнопка «Наверх», позволяющая пользователю быстро вернуться к началу страницы. Ведь именно в начале страницы, как правило, размещаются все навигационные меню сайта.

Самый простой вариант такой кнопки — ссылка с рисунком в качестве содержимого. Якорем для ссылки служит идентификатор самого верхнего на странице элемента (то есть элемента, в верхней границе которого будет возвращён пользователь при нажатии на кнопку). Элемент с кнопкой в исходном коде следует разместить в самом конце документа, ближе к закрывающему тегу .

Реальное положение кнопки на странице (а точнее, элемента с кнопкой) следует отрегулировать с помощью средств CSS. Это положение следует выбрать таким, чтобы кнопка как можно меньше мешала просмотру содержимого страницы. Поэтому здесь немаловажным фактором будет размер кнопки и её цвет: она должна быть заметна, но при этом не должна раздражать своим цветом и фактом присутствия. При необходимости кнопку можно сделать полупрозрачной, используя CSS-свойство opacity .

.floating-button < position: fixed; /* фиксируем позицию */ top: 20px; /* расстояние от верхней границы экрана */ right: 20px; /* расстояние от правой границы экрана */ > #arrow < display: none; /* скрываем рисунок-ссылку до нужного момента */ >

Для показа/скрытия кнопки пишется небольшой скрипт, который следует разместить также перед закрывающим тегом , чтобы загрузка скрипта происходила только после загрузки основного контента страницы.

 window.onscroll = function() < var scrolled = window.pageYOffset || document.documentElement.scrollTop; if (scrolled > 550) < // Если страница прокручена вниз более, чем на 550 пикселей, // выводим кнопку на экран document.getElementById('arrow').style.display = 'block'; > else < // В противном случае убираем кнопку с экрана document.getElementById('arrow').style.display = 'none'; > >

Если весь этот код разместить в одном файле, то выглядеть это будет следующим образом:

    charset="utf-8"> Example .floating-button < position: fixed; /* фиксируем позицию */ top: 20px; /* расстояние от верхней границы экрана */ right: 20px; /* расстояние от правой границы экрана */ > #arrow display: none;> /* скрываем рисунок-ссылку до нужного момента */   id="top-page"> . . . . . .  class="floating-button"> id="arrow" href="#top-page" title="К началу страницы"> src="files/button.gif" width="40" height="40" alt="">
window.onscroll = function() < var scrolled = window.pageYOffset || document.documentElement.scrollTop; if (scrolled > 550) < // Если страница прокручена вниз более, чем на 550 пикселей, // выводим кнопку на экран document.getElementById('arrow').style.display = 'block'; > else < // В противном случае убираем кнопку с экрана document.getElementById('arrow').style.display = 'none'; > >

А так это может выглядеть в браузере:

Примечание: Если в сценариях на странице планируется использовать функции из библиотеки jQuery, то вышеприведённый исходный JavaScript-код можно заменить следующим:

  src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">  $(document).ready(function()< $(window).scroll(function() < if($(window).scrollTop() > 550) < // показываем элемент, если страница прокручена вниз // более, чем на 550 пикселей $('#arrow').show(); > else < // иначе делаем элемент скрытым $('#arrow').hide(); > >); >);

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

Реализовать такую прокрутку страницы можно с помощью JavaScript, а точнее, с помощью метода scrollBy() объекта window . Вызов функции скроллинга будет происходить из событийного атрибута onclick элемента, представляющего собой кнопку.

Пример одного из вариантов JavaScript-кода для медленной прокрутки содержимого:

 // Функция прокрутки страницы к началу // (вызывается после клика по кнопке "Наверх") var scrollToStart = function() < if (document.body.scrollTop>0 || document.documentElement.scrollTop>0) < // Если не достигнута верхняя граница страницы, // прокручиваем страницу вверх на 200 px window.scrollBy(0,-200); setTimeout(scrollToStart, 5); // повторный вызов функции через 5 ms > > // Функция показа/скрытия кнопки "Наверх" window.onscroll = function() < var scrolled = window.pageYOffset || document.documentElement.scrollTop; if (scrolled > 550) < // Если страница прокручена вниз более, чем на 550 пикселей, // выводим кнопку на экран document.getElementById('arrow').style.display = 'block'; > else < // В противном случае убираем кнопку с экрана document.getElementById('arrow').style.display = 'none'; > >

Поскольку прокрутка страницы вверх будет осуществляться программно, удаляем из HTML-кода лишнюю ссылку и якорь. В стилях же следует переопределить вид курсора, который курсор будет принимать при наведении на рисунок кнопки. Стандартным значением для кнопок и ссылок является вид pointer () .

    charset="utf-8"> Example .floating-button < position: fixed; /* фиксируем позицию */ top: 20px; /* расстояние от верхней границы экрана */ right: 20px; /* расстояние от правой границы экрана */ > #arrow < display: none; /* скрываем рисунок до нужного момента */ cursor: pointer; /* задаем вид курсора */ > . . .  class="floating-button"> src="files/button.gif" width="40" height="40" alt="" id="arrow" title="К началу страницы" onclick="scrollToStart(); return false;">
// Функция прокрутки страницы к началу // (вызывается после клика по кнопке "Наверх") var scrollToStart = function() < if (document.body.scrollTop>0 || document.documentElement.scrollTop>0) < // Если не достигнута верхняя граница страницы, // прокручиваем страницу вверх на 200 px window.scrollBy(0,-200); setTimeout(scrollToStart, 5); // повторный вызов функции через 5 ms > > // Функция показа/скрытия кнопки "Наверх" window.onscroll = function() < var scrolled = window.pageYOffset || document.documentElement.scrollTop; if (scrolled > 550) < // Если страница прокручена вниз более, чем на 550 пикселей, // выводим кнопку на экран document.getElementById('arrow').style.display = 'block'; > else < // В противном случае убираем кнопку с экрана document.getElementById('arrow').style.display = 'none'; > >

Изменяя второй аргумент метода scrollBy() , можно увеличить или уменьшить скорость прокрутки страницы. Однако не следует делать скроллинг слишком медленным, так как у пользователя может лопнуть терпение, и он, не дождавшись окончания прокрутки, просто закроет вкладку.

Примечание: Если в сценариях на странице планируется использовать функции из библиотеки jQuery, то вышеприведённый исходный JavaScript-код можно заменить следующим:

  src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">  $(document).ready(function()< $(window).scroll(function() < if($(window).scrollTop() > 550) < // показываем элемент, если прокручено вниз // более, чем на 550 px $('#arrow').show(); > else < // иначе делаем элемент скрытым $('#arrow').hide(); > >); $('#arrow').click(function() < // при клике прокручиваем страницу вверх $('body,html').animate(< scrollTop: 0 >, 400); return false; >); >);

Необходимость в событийном атрибуте onclick в теге при этом отпадает, и его следует удалить.

Как создать кнопку с помощью средств CSS

Если под существующий дизайн страницы не удаётся подобрать подходящую рисованную кнопку, её можно попробовать создать с помощью средств CSS. Для этого в HTML-коде следует заменить тег (рисунок кнопки) подходящей текстовой строкой, например, следующего содержания:

  id="top-page"> . . . . . .  class="floating-button"> id="arrow" href="#top-page">⇑ Вверх

Чтобы данная текстовая ссылка приняла вид кнопки, в таблице стилей указываем для неё цвет текста, цвет фона и параметры рамки:

.floating-button < position: fixed; /* фиксируем позицию */ top: 20px; /* расстояние от верхней границы экрана */ right: 20px; /* расстояние от правой границы экрана */ > #arrow < display: none; /* скрываем кнопку до нужного момента */ padding: 9px 15px 4px; /* размер кнопки */ color: #000000; /* цвет надписи */ background: #b0e4ee; /* цвет фона */ border: 1px solid #767676; /* параметры рамки */ border-radius: 3px; /* скругляем углы */ text-decoration: none; /* убираем стандартное подчеркивание */ font: 12pt sans-serif; /* параметры шрифта */ >

Теперь, если весь этот код вместе со скриптами разместить в одном файле, выглядеть это будет следующим образом:

    charset="utf-8"> Example .floating-button < position: fixed; /* фиксируем позицию */ top: 20px; /* расстояние от верхней границы экрана */ right: 20px; /* расстояние от правой границы экрана */ > #arrow < display: none; /* скрываем кнопку до нужного момента */ padding: 9px 15px 4px; /* размер кнопки */ color: #000000; /* цвет надписи */ background: #b0e4ee; /* цвет фона */ border: 1px solid #767676; /* параметры рамки */ border-radius: 3px; /* скругляем углы */ text-decoration: none; /* убираем стандартное подчеркивание */ font: 12pt sans-serif; /* параметры шрифта */ >  id="top-page"> . . . . . .  class="floating-button"> id="arrow" href="#top-page">⇑ Вверх
window.onscroll = function() < var scrolled = window.pageYOffset || document.documentElement.scrollTop; if (scrolled > 550) < // Если страница прокручена вниз более, чем на 550 пикселей, // выводим кнопку на экран document.getElementById('arrow').style.display = 'block'; > else < // В противном случае убираем кнопку с экрана document.getElementById('arrow').style.display = 'none'; > >

А так это будет выглядеть в браузере:

Другие статьи по схожей тематике

Источник

Урок 27. Ссылка «Наверх страницы»

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

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

Пропишем ссылку подобно тому, как прописываются «якоря» для страницы, о которых шла речь в Уроке 16 Выглядеть это будет так:

Вверху страницы вы ставите «якорь». Например, я поставила в него часть заглавия страницы: «В этом разделе. «

Внизу страницы вы помещаете ссылку «НАВЕРХ»:

У этого способа есть один недостаток. Браузеры не всегда адекватно себя ведут с подобными ссылками. Например, если вы наведёте курсор мыши на надпись вверху страницы «В этом разделе» — то скорее всего вы увидите, что помещённая в «якорь» часть фразы начинает отображаться, как ссылка.

Для того, чтобы ничего такого не происходило и не нужно было искать, что бы поместить в «якорь», можно поступить по способу 2.

Можно попробовать просто разместить внизу станицы ссылку вида:

Теоретически, ни один браузер не должен возражать против такого способа и по клику возвращать страницу в исходное положение. Но более надёжно поступить следующим образом, который мы рассмотрим в способе 3.

Разместим внизу страницы ссылку вида:

При данном способе мы задействуем указание на прокрутку-возвращение по клику, где значения (0,0) — это перемотка страницы на указанное количество пикселей по горизонтали и вертикали. Если мы обнулим эти значения, то любой браузер воспримет нашу ссылку как указание вернуться в исходное положение, то есть, на начало страницы. И наконец, чуть отличающийся четвёртый способ.

Этот способ основан на JavaScript и так же, как предыдущий, однозначно работает в любом браузере. В низу страницы, под вашим текстом или картинками вы размещаете следующую конструкцию:

Здесь, как видите, тоже есть указание на то, чтобы прокрутить страницу на указанные пикселы (0,0), которые мы обнуляем и в результате, когда мы нажимаем на данную ссылку, браузер возвращает страницу в первоначальное положение.

Само собой, во всех указанных способах можно вместо слова «НАВЕРХ» расположить картинку, обозначающую возвращение к началу страницы.

Примечание: вместо надписи «НАВЕРХ» (Вернуться к началу, Вверх, К оглавлению и т.п.) вы можете поставить картинку, вписав её код вида

Источник

Читайте также:  How to fire event in javascript
Оцените статью