Прокрутка страницы вверх


Содержание

Прокрутка страницы вверх

Вы не можете посетить текущую страницу по причине:

  1. просроченная закладка/избранное
  2. поисковый механизм, у которого просрочен список для этого сайта
  3. пропущен адрес
  4. у вас нет права доступа на эту страницу
  5. Запрашиваемый ресурс не найден.
  6. В процессе обработки вашего запроса произошла ошибка.

Пожалуйста, перейдите на одну из следующих страниц:

Если проблемы продолжатся, пожалуйста, обратитесь к системному администратору сайта и сообщите об ошибке, описание которой приведено ниже.

Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)

Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по душе.

Вариант на JavaScript

Число -100 — это количество пикселей, которое прокручивается вверх через каждые 0,02 секунды (число 20 ).

В подходящее место html-кода страницы необходимо добавить такую ссылку:

Вариант на jQuery

Число 500 — это время, в течение которого происходит анимация (прокрутка), в данном случае это полсекунды.

В подходящее место html-кода страницы необходимо добавить такую ссылку:

В случае, если в браузере отключен JavaScript, при клике на данную ссылку страница также прокрутится наверх, но только уже не плавно.

Смотрите также

  • jQuery-cкрипт «Добавить в закладки» 135 комментариев
  • Скрипт предпросмотра комментария с помощью jQuery: вариант 2 22 комментария
  • Скрипт предпросмотра комментария с помощью jQuery: вариант 1 19 комментариев
  • Создаем удобные, практичные вкладки с помощью jQuery 51 комментарий

Комментарии (63)

Так намного лучше — при приближении к вершине документа скроллинг замедляется.

Спасибо, заврианто на JS забрал в свой фреймворк! Пиши еще на JS … Нафиг тебе эта рыбалка? :D

Я не парился и прикрутил все на чистом HTML. Правда все время висит)))

Прокрутка сверху вниз:

var t;
function up() <
if((window.innerHeight + window.pageYOffset) Антон

А как сделать скрол, который при первом нажатии на ссылку поднимался бы вверх, а при втором нажатии опускался бы вниз и так постоянно, раз вверх, раз в них?

Размеры и прокрутка страницы

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/size-and-scroll-window.

Как найти ширину окна браузера? Как узнать всю высоту страницы, с учётом прокрутки? Как прокрутить её из JavaScript?

С точки зрения HTML, документ – это document.documentElement . У этого элемента, соответствующего тегу , есть все стандартные свойства и метрики и, в теории, они и должны нам помочь. Однако, на практике есть ряд нюансов, именно их мы рассмотрим в этой главе.

Ширина/высота видимой части окна

Свойства clientWidth/Height для элемента document.documentElement – это как раз ширина/высота видимой области окна.

Например, кнопка ниже выведет размер такой области для этой страницы:

Все браузеры, кроме IE8-, также поддерживают свойства window.innerWidth/innerHeight . Они хранят текущий размер окна браузера.

В чём отличие? Оно небольшое, но чрезвычайно важное.

Свойства clientWidth/Height , если есть полоса прокрутки, возвращают именно ширину/высоту внутри неё, доступную для документа, а window.innerWidth/Height – игнорируют её наличие.

Если справа часть страницы занимает полоса прокрутки, то эти строки выведут разное:

Обычно нам нужна именно доступная ширина окна, например, чтобы нарисовать что-либо, то есть за вычетом полосы прокрутки. Поэтому используем documentElement.clientWidth .

Ширина/высота страницы с учётом прокрутки

Теоретически, видимая часть страницы – это documentElement.clientWidth/Height , а полный размер с учётом прокрутки – по аналогии, documentElement.scrollWidth/scrollHeight .

Это верно для обычных элементов.

А вот для страницы с этими свойствами возникает проблема, когда прокрутка то есть, то нет. В этом случае они работают некорректно. В браузерах Chrome/Safari и Opera при отсутствии прокрутки значение documentElement.scrollHeight в этом случае может быть даже меньше, чем documentElement.clientHeight , что, конечно же, выглядит как совершеннейшая чепуха и нонсенс.

Эта проблема возникает именно для documentElement , то есть для всей страницы.

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

Почему так? Лучше и не спрашивайте, это одно из редких мест, где просто ошибки в браузерах. Глубокой логики здесь нет.

Получение текущей прокрутки

У обычного элемента текущую прокрутку можно получить в scrollLeft/scrollTop .

Что же со страницей?

Большинство браузеров корректно обработает запрос к documentElement.scrollLeft/Top , однако Safari/Chrome/Opera есть ошибки (к примеру 157855, 106133), из-за которых следует использовать document.body .

Илон Маск рекомендует:  Php руководство по рнр 3 0 функции работы с informix

Чтобы вообще обойти проблему, можно использовать специальные свойства window.pageXOffset/pageYOffset :

  • Не поддерживаются IE8-
  • Их можно только читать, а менять нельзя.

Если IE8- не волнует, то просто используем эти свойства.

Кросс-браузерный вариант с учётом IE8 предусматривает откат на documentElement :

Изменение прокрутки: scrollTo, scrollBy, scrollIntoView

Чтобы прокрутить страницу при помощи JavaScript, её DOM должен быть полностью загружен.

На обычных элементах свойства scrollTop/scrollLeft можно изменять, и при этом элемент будет прокручиваться.


Никто не мешает точно так же поступать и со страницей. Во всех браузерах, кроме Chrome/Safari/Opera можно осуществить прокрутку установкой document.documentElement.scrollTop , а в указанных – использовать для этого document.body.scrollTop . И будет работать. Можно попробовать прокручивать и так и эдак и проверять, подействовала ли прокрутка, будет кросс-браузерно.

Но есть и другое, простое и универсальное решение – специальные методы прокрутки страницы window.scrollBy(x,y) и window.scrollTo(pageX,pageY).

Метод scrollBy(x,y) прокручивает страницу относительно текущих координат.

Например, кнопка ниже прокрутит страницу на 10px вниз:

Метод scrollTo(pageX,pageY) прокручивает страницу к указанным координатам относительно документа.

Он эквивалентен установке свойств scrollLeft/scrollTop .

Чтобы прокрутить в начало документа, достаточно указать координаты (0,0) .

scrollIntoView

Для полноты картины рассмотрим также метод elem.scrollIntoView(top).

Метод elem.scrollIntoView(top) вызывается на элементе и прокручивает страницу так, чтобы элемент оказался вверху, если параметр top равен true , и внизу, если top равен false . Причём, если параметр top не указан, то он считается равным true .

Кнопка ниже прокрутит страницу так, чтобы кнопка оказалась вверху:

А следующая кнопка прокрутит страницу так, чтобы кнопка оказалась внизу:

Запрет прокрутки

Иногда бывает нужно временно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.

Чтобы запретить прокрутку страницы, достаточно поставить document.body.style.overflow = «hidden» .

При этом страница замрёт в текущем положении.

При нажатии на верхнюю кнопку страница замрёт на текущем положении прокрутки. После нажатия на нижнюю – прокрутка возобновится.

Вместо document.body может быть любой элемент, прокрутку которого необходимо запретить.

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

Это может быть не очень красиво, но легко обходится, если вычислить размер прокрутки и добавить такой же по размеру padding .

Итого

Для получения размеров видимой части окна: document.documentElement.clientWidth/Height

Для получения размеров страницы с учётом прокрутки:

Прокрутка окна:

Прокрутку окна можно получить как window.pageYOffset (для горизонтальной – window.pageXOffset ) везде, кроме IE8-.

На всякий случай – вот самый кросс-браузерный способ, учитывающий IE7- в том числе:

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

  • window.scrollTo(pageX,pageY) – абсолютные координаты,
  • window.scrollBy(x,y) – прокрутить относительно текущего места.
  • elem.scrollIntoView(top) – прокрутить, чтобы элемент elem стал виден.

Задачи

Полифилл для pageYOffset в IE8

Обычно в IE8 не поддерживается свойство pageYOffset . Напишите полифилл для него.

При подключённом полифилле такой код должен работать в IE8:

В стандартном режиме IE8 можно получить текущую прокрутку так:

Самым простым, но неверным было бы такое решение:

Как сделать — кнопку «прокрутить вверх»

Узнайте, как создать кнопку «прокрутить вверх» с помощью CSS.

Как создать кнопку прокрутки к началу

Шаг 1) добавить HTML:

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

Пример

Шаг 2) добавить CSS:

Пример

#myBtn <
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: red; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
>

#myBtn:hover <
background-color: #555; /* Add a dark-grey background on hover */
>

ТОП-3 лучших способа кнопки вверх для сайта

Здравствуйте, уважаемые посетители!

Я продолжаю публиковать статьи технической тематики.

И сегодня я затрону интересную тему, в которой мы обсудим кнопку прокрутки вверх страницы на сайте. Мы поговорим о важности данной кнопки, как я люблю это делать. Также покажу наиболее интересные и эффективные реализации этой функции.

Нужна ли

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

Данная функция — это некий элемент, который в определенных случаях улучшает юзабилити сайта. Вот в каких случаях, мы сейчас с вами и разберем.

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

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

Илон Маск рекомендует:  Музыка и звуки на HTML-странице. Что такое HTML. Учебник по HTML.

Поэтому, если на вашем сайте действительно большие статьи, то кнопку можно и установить, но сделать ее нужно такой, чтобы на нее было легко нажать и сделать это было проще, чем крутить ролик или воспользоваться полосой прокрутки в браузере. В другом случае, какой от нее будет толк, если она будет равнозначна стандартным действиям?

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

Кнопка вверх, как Вконтакте

Отличительной чертой данной кнопки является ее простота в использовании. Она имеет вид полосы прокрутки в левой части сайта, которая занимает всю высоту ресурса.


Такой вариант уже зарекомендовал себя, так как практически нет пользователей, которые ей не пользуются в соц. сети Вконтакте. Удобна данная реализация тем, что не приходится целиться курсором мышки на какую-то кнопку. Достаточно просто кликнуть на левую область сайта и страница прокрутится в самый верх. Нет необходимости даже следить за курсором, можно просто двинуть мышью в самый край экрана и кликнуть один раз.

Лично я рекомендую сделать такой способ, чтобы дать посетителям привычный вариант. Уверен, что процент пользования данной функции на сайте будет увеличен, что скажется на улучшении юзабилити сайта.

Сделать точной такую же реализацию, как Вконтакте не получится, но вот приближенный вариант — запросто.

Чтобы реализовать его, нужно всего лишь разместить скрипт на сайте.

Для загрузки скрипта можно разместить сам код между тегами или перед закрывающим тегом

Создаём кнопку «наверх» для сайта

Рассмотрим простой способ создания кнопки «наверх» для сайта, которая будет появляться при прокрутке страницы вниз. Разберем возможность реализации на чистом javascript и найдём причины по которым она может не работать.

  1. подключить jQuery;
  2. загрузить на сайт изображение кнопки;
  3. добавить код, скрипт и стили.

Подключаем jQuery — прописываем загрузку последней версии библиотеки в секции «head» шаблона или где-то вверхней части сайта.

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

width: 100px;
height: 40px;
width: 74px;
height: 94px;
width: 60px;
height: 60px;
width: 67px;
height: 80px;
width: 63px;
height: 61px;

Вставляем код, скрипт и стиль . Остаётся в стиле указать путь к изображению, ширину и высоту.

Пример должен работать в большинстве случаев, но на некоторых движках могут возникнуть проблемы. Например, «Joomla» использует framework «Mootools», который часто конфликтует с jQuery. В таком случае можно воспользоваться упрощённой плавающей кнопкой «наверх».

Как сделать кнопку «наверх» без jQuery

Можно сделать плавающую кнопку «наверх» на чистом javascript без использования сторонних библиотек. Стили берём из предыдущего примера. Скрипт и код копируем в любое место шаблона.

Первая функция отвечает за автоматическое перемещение к началу страницы, а вторая — за показ и скрытие кнопки в зависимости от положения прокрутки.

Что делать, если кнопка «наверх» не работает

Если кнопка не отображается, то измените в стилях свойство «display: none;» на «display: block;» и проверьте, появится ли она. Нет? Значит проблема в неправильном пути к изображению или код размещён в неподходящем месте. Попробуйте разместить его перед закрывающимся тегом «body».

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

Это позволит выполнить скрипт после загрузки всей страницы. Не помогло? Пиши в комментариях и постараемся найти проблему вместе.

Плавная прокрутка вверх, вниз и к прочтению на jQuery

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

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

Как это работает?

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

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

Оформление

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

В стилях мы задали каждому блоку фиксированную позицию в правом нижнем углу. Обратите внимание, что у кнопки «в начало» , имеющей класс .go-top задано свойство display: none; , это необходимо для того, чтобы при новой загрузке страницы кнопка была скрыта, т.к. мы итак будем находиться в начале.

Илон Маск рекомендует:  Sqlвыборка вычисляемых значений

Скрипты

Теперь нам осталось добавить самое главное, скрипт, который будет обрабатывать нажатия на блоки навигации и реагировать на прокрутку страницы.

Обратите внимание, в самом начале мы задаем текущее положение окна переменной content_position с помощью функции jQuery(window).scrollTop(); . Это необходимо на случай, если пользователь просматривая страницу, обновил ее.

Условие if (jQuery(window).scrollTop() >= «250») обрабатывается при старте страницы, и если область просмотра больше или равна 250, то кнопку «в начало» необходимо отобразить. Если Вам необходимо, чтобы данная кнопка отобразилась раньше или позже, уменьшите или увеличьте данное значение соответственно. Далее идет условие для кнопки «в конец» , если нижняя область окна достигла 250 снизу, прячем эту кнопку. Для того, чтобы кнопка вниз исчезла раньше или позже, увеличьте или уменьшите значение соответственно.

Последнее, что мы добавили, это обработку клика на блоки навигации. jQuery(«html,body»).animate(,»slow»); данное действие возвращает область просмотра в самый верх, в позицию 0. jQuery(«html,body»).animate(,»slow»); возвращает область прокрутки в самый низ, здесь происходит определение высоты всей страницы за вычетом высоты области просмотра, это сделано для того, чтобы прокрутка была не слишком резкой. Также в данных событиях Вы можете изменить скорость прокрутки, заменив значение slow на одно из следующих: slow — медленно, normal — нормально, fast — быстро, либо указать числовое значение (без кавычек), чтобы плавная прокрутка срабатывала именно так, как Вам нужно.

Также обратите внимание, что в обработке клика на блоки «в начало»/«в конец» присутствует строка content_position = jQuery(window).scrollTop(); , т.е. при клике на одну из этих кнопок, мы передаем текущую позицию окна в переменную, которую мы задали в самом начале. В результате чего, при нажатии на блок «возврат к чтению» происходит возврат страницы к позиции, которую мы передали в переменную content_position с помощью действия jQuery(«html,body»).animate(,»slow»);

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

Как сделать — кнопку «прокрутить вверх»

Узнайте, как создать кнопку «прокрутить вверх» с помощью CSS.

Как создать кнопку прокрутки к началу

Шаг 1) добавить HTML:

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

Пример

Шаг 2) добавить CSS:

Пример

#myBtn <
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: red; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
>

#myBtn:hover <
background-color: #555; /* Add a dark-grey background on hover */
>

Плавная кнопка «Наверх» на jQuery

29.06.2014 0 7230

Многие из Вас видели, что на некоторых сайтах при прокрутке окна браузера, в какой-то момент появляется кнопка «Наверх». Если по ней кликнуть, то начинается плавная перемотка полосы прокрутки до самого верха. Как реализовать плавную кнопку «Наверх» через jQuery, Вы и узнаете из этой статьи.

Для начала создадим в html нашу кнопку.

Добавим стили к нашей кнопки

Javascript и jQuery

Далее создадим функцию которая будет при скролинге страницы показывать или скрывать нашу кнопку. Также сделаем чтобы кнопка не сразу появлялась, а при отступе сверху 50px. Если расстояние до верха меньше 50 px то будем скрывать кнопку. Для того чтобы при нажатии на кнопку, прокрутка в начало страницы была плавной мы добавили функцию animate.

Вот и все, кнопка готова к использованию. Также вначале не забудьте подключить фреймворк jQuery.

Прокрутка страницы вверх и вниз

Очень нужная «фишка» на сайте — стрелка прокрутки вверх, особенно если страницы получаются довольно длинными, !особенно если на сайте нет прилепленного header.

Вставляем в самый низ, перед wp_footer

Поделится информацией с друзьями

Всплывающее окно при посещении сайта

  • Похожие записи
  • Комментарии
  • Вложения

Изменение объекта при скроллинге

Учимся использовать jquery эффекты при скроллинге. Данные эффекты чаще всего применяются на промо-страницах и лэндингах. ScrollMe Скрипт Scrollme состоит из одного файла с набором скриптов, подключаем его wp_enqueue_script( ‘scrollme’, get_template_directory_uri() Читать далее »

Создаем анимацию Scroll Down

Для лэндингов часто используют анимацию в виде стрелки или колесика мышки, чтобы показать что можно (нужно) листать ниже. Создадим подобную анимацию с помощью css и jquery. Анимация колесика мышки Создадим Читать далее »

Модальное окно на jquery

Создаем модальное (всплывающее) окно основанное на технологии jquery. Про подобное решение на чистом CSS читайте здесь. Принцип модального окна Вставляем в HEADER (выше всего контента), #backfon — это фон модального Читать далее »

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL