Scrolltop jquery window: .scrollTop() | jQuery API Documentation

DHTML-скрипты Dynamic Drive — jQuery Scroll to Top Control

Примечание: 7 апреля 2009 года. Добавляет возможность прокрутите до абсолютной позиции (сверху страницы) или определенного элемента на вместо этого страница. Также исправляет анимацию прокрутки, не работающую в Opera.

Описание: Если ваши страницы длинные наматывается, рекомендуется предоставить зрителям простой способ быстро/ автоматическая прокрутка назад к началу страницы. Вот где это приходит сценарий. Он отображает неподвижный элемент управления в правом нижнем углу угол окна, который при нажатии плавно прокручивает страницу назад до самого верха. И вместо того, чтобы всегда быть видимым на экране пользователя, сценарий позволяет вам указать, как далеко вниз по странице находится пользователь (в пикселей) до открытия элемента управления. Отлично!

Обратите внимание, что помимо отображения стационарного элемента управления вы можете также определите произвольные якорные ссылки на странице со специальным значением href (например:

#top ), что при нажатии активирует скрипт и прокручивает страницу вернуться наверх.

Демонстрация: Прокрутите страницу вниз (минимум на 100 пикселей) до см. элемент управления «Вернуться к началу» в правом нижнем углу окна.


Проезд:

Шаг 1: Просто добавьте ниже script в раздел вашей страницы:

Выбрать все

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

  • scrolltopcontrol.js

Важное примечание: Ваша страница должна содержать допустимый тип документа в самом верху страницы. чтобы этот скрипт работал по назначению.

Вы можете настроить различные параметры, такие как количество время, необходимое сценарию для прокрутки вверх, продолжительность затухания эффект входа/выхода для элемента управления и количество пикселей полосы прокрутки пользователя должен быть в верхней части страницы, прежде чем открывать элемент управления. Внутри .js файл, вот соответствующий раздел для изменения:

настройка: {начальная строка: 100, прокрутить до: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: ‘‘, //HTML для элемент управления, который автоматически помещается в DIV с
controlattrs: {offsetx:15, offsety:15}, //смещение элемента управления относительно правого/ нижняя часть угла окна
anchorkeyword: ‘#top’, //Введите значение href якорей HTML на странице, которая также должны действовать как ссылки «Прокрутка вверх»

Для « controlHTML

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

Наверх

Наверх

Изменение целевого назначения «Прокрутки вверх» Контроль

По умолчанию, когда вы нажимаете кнопку «Прокрутить до верхнего элемента управления», прокручивает страницу до самого верха. Однако вы можете изменить это, сказав: 50 пикселей от самого верха страницы или прокрутите до определенного элемента на страницу, например заголовок. Параметр, который нужно изменить, — это «scrolltop» внутри .js файл:

настройка: {начальная строка: 100, прокрутить до: 0 , scrollduration:1000, fadeduration:[500, 100]},

Измените 0 либо на целое число (например, 50), либо на идентификатор элемента вы хотите, чтобы элемент управления прокручивался до, например, » мой заголовок «, где « мой заголовок » элемент, определенный на странице:

Добро пожаловать в Dynamic Гони!

 

 

высота документа. Не обращайте внимания на следующее, это просто фиктивный текст чтобы растянуть документ по высоте.

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *