Как сделать кнопку "Наверх"
Наверняка, Вы часто встречали кнопку "Наверх". Иногда это кнопка, иногда ссылка, это не важно. Например, это кнопка есть вконтакте. И в этой статье я расскажу, как сделать кнопку "наверх".
Кнопка "наверх" позволяет быстро перейти к самому верху страницы. Есть различные способы её реализации, однако, есть, на мой взгляд, самый простой и удобный способ - через использование уникальных идентификаторов.
Давайте сразу приведу код, и Вы всё поймёте:
<div id="top"></div>
<!-- Много контента -->
<a href="#top">Наверх</a>
Соответственно, при клике по ссылке "Наверх" мы попадём на элемент с id="top", то есть тот самый div. Если его расположить сразу после body, то это и будет самый верх страницы. Как видите, всё очень просто.
Есть ещё один способ, он ещё проще этого, однако, здесь требуется использование JavaScript. Вот код:
<a href="javascript:scroll(0,0);">Наверх</a>
Снова при клике мы попадём на самый верх страницы, но здесь уже не нужно добавлять пустые блоки с нужным id. То есть код получается короче, но недостаток - это использование JavaScript.
Классическим и более надёжным является именно первый способ, зато более короткий - второй способ. Какой именно способ использовать для создания кнопки "наверх", выбирать Вам.
-
Создано 10.02.2012 14:08:02
-
Михаил Русаков
Комментарии (13):
Зачем создавать ещё один блок чтобы перейти наверх??? Не проще ли сделать так <a href = "#">Наверх</a> и всё.
Ответить
Действительно, можно и так. Не использовал такой способ, но теперь буду знать. Спасибо!
Ответить
А как на javascript сделать плавный переход наверх и чтобы при нахождении вверху странички кнопка исчезала?
Ответить
Для этого лучше использовать JQuery. Есть специальные плагины для этого.
Ответить
Кстати, кнопка "наверх" как правило появляется только если прокрутить окно вниз. А на самом "верху" ее не должно быть видно, логично? Интересно, какое событие отвечает за ее появление?
Ответить
Это событие называется scroll, обработчик onscroll, применяется к body.
Ответить
А если чуть сложнее: если пользователь прокрутит страничку вниз на заданное число пикселей?
Ответить
Так для этого и используется onscroll. Ставьте функцию в обработчике и проверяйте каждый раз значение такого выражения: self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
Ответить
Супер! То, что надо, спасибо.
Ответить
Кстати, на тему скроллинга. Всегда интересно было, как реализовать подгрузку изображений аяксом в момент, когда они попадают во "viewport". Т.е. как заставить картинки грузится лишь тогда, когда юзер прокручивает экран вниз, и они попадают в его поле зрения...
Ответить
Примерно так. Вместо изображений создаются пустые блоки. Затем проверяется, находится ли данный блок в поле видимости окна. Если да, то этот блок заменяется (либо вставляется внутрь) на изображение, опять же через JavaScript (объект Image). При замене на изображение и начнётся его загрузка.
Ответить
алгоритм ясен. поймать же момент, когда изображение попадает в поле зрения я попытался, проверяя по событию scroll это условие: (document.body.scrollTop + screen.availHeight) > myImage.offsetTop)
Ответить
Михаил и Никита, спасибо Вам обоим. Получилось двумя способами с первого раза, а мучилась уже целый год, не знала, как это сделать.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.