Javascript к концу страницы

html-прокрутка: перейти к концу страницы (по горизонтали) с помощью javascript?

Есть ли скрипт, который перейдет на страницу до горизонтального конца.

Пользователь может нажимать «Домой» и «Конец» на клавиатуре, чтобы перейти к верхней и нижней части веб-страницы, но как насчет правого и левого?

Как избавить пользователя от неудобства, связанного с прокруткой до самых дальних глубин прокрутки x

2 ответа

Горизонтальная прокрутка является довольно редкой ситуацией, так как, естественно, браузер будет пытаться выполнять вертикальную прокрутку, если не изменяемые размеры действительно не переполняют видимую область; Таким образом, я предполагаю, что вы находитесь в явно горизонтальном дизайне, таком как один из них: http://webdesignledger.com/inspiration/40-of-the-best-horizontal-scrolling-websites

В любом случае, основа одна и та же: поймайте какое-нибудь ключевое * событие и делайте что хотите.

Поймай событие и запусти функцию прокрутки:

document.body.addEventListener('keydown', scrollfct, true); 

Первое предупреждение: нажатие клавиши не будет захватывать специальные символы, такие как вверх / вниз и т. Д., Поэтому используйте «keydown» или «keyup»

function scrollfct(e) < console.log(evt.keyCode); /* this will debug that your function is being called, and will help you get the keyCodes you want. Remove in production :-) */ var HOME_LEFT = 33; //HOME var HOME_RIGHT = 34; //END if (e.keyCode == HOME_LEFT) < window.scroll(0,0); >; if (e.keyCode == HOME_RIGHT) < window.scroll(document.body.scrollWidth,0); >> 

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

Источник

html-прокрутка: перейти к концу страницы (по горизонтали) с помощью javascript?

Есть ли script, который переместит страницу на горизонтальный конец. Пользователь может нажать «Домой» и «Конец» на клавиатуре, чтобы перейти к верхней и нижней части веб-страницы, но как быть вправо и влево? Как избавить пользователя от неудобства прокрутки до далекой глубины прокрутки x

2 ответа

Горизонтальная прокрутка — это как-то нерегулярная ситуация, так как, естественно, браузер будет пытаться выполнить вертикальную прокрутку, если только неповторимые элементы не переполняют видимую область; Таким образом, я предполагаю, что вы больше в явно горизонтальном дизайне, таком как один из них: http://webdesignledger.com/inspiration/40-of-the-best-horizontal-scrolling-websites В любом случае базовое одно и то же: поймайте какое-то ключевое событие * и сделайте то, что вы хотите. Поймайте событие и запустите функцию прокрутки:

document.body.addEventListener('keydown', scrollfct, true); 

Первое предостережение: «keypress» не будет захватывать специальные символы, такие как вверх/вниз и т.д., поэтому используйте «keydown» или «keyup» Теперь функция прокрутки:

function scrollfct(e) < console.log(evt.keyCode); /* this will debug that your function is being called, and will help you get the keyCodes you want. Remove in production :-) */ var HOME_LEFT = 33; //HOME var HOME_RIGHT = 34; //END if (e.keyCode == HOME_LEFT) < window.scroll(0,0); >; if (e.keyCode == HOME_RIGHT) < window.scroll(document.body.scrollWidth,0); >> 

Для window.scroll doc: https://developer.mozilla.org/en/Window.scroll Второе предостережение: чтобы быть полностью перекрестным браузером, вам придется выполнить домашнюю работу. Если вы хотите иметь дело с колесиком мыши или хотите какой-то гладкий свиток, проверьте это: http://paulicio.us/items/view/24/horizontal-page-scrolling-using-javascript или с помощью jQuery: http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/ Или просто используйте HTML5 CSS-переходы.

Обычно я бы сказал, что разбиение на страницы спасет пользователя от прокрутки по всему месту, но есть пара других методов. Вы можете включить «правильную» кнопку, которая ссылается на идентификатор чего-то справа от страницы. Это немедленно подскочит к ним. Это будет выглядеть как

Или в javascript должно работать следующее.

window.scrollTo(document.body.scrollWidth, 0); 

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

Источник

Как проскролить страницу до конца?

Суть в том.что загружаю страницу на сайте,нажимаю стрелку вниз она еще подгружаеться .Хочу скриптом js прокрутить ее пока не будет достигнут конец.Подскажите какой командой это сделать?

Как проскролить программно MetroTextBox?
Данный способ работает на textBox, но на MetroTextBox не пашет, подскажите аналог для MTB.

Как проскролить программно textBox?
Каким методом можно проскролить до конца textBox со свойством multiline

HorzScrollBox, как проскролить до нужной позиции?
Всем доброго. Имеется HorzScrollBox, на котором находится энное количество баттонов. В видимой.

Как проскролить Treeview во время Drag&Drop?
B VB6 это легко делается использованием Win32 API функции SendMessage(. ), в . NET это почему-то.

Скорее всего вам будет нужно вызывать эту функцию по таймеру

window.scrollTo(0,document.body.scrollHeight);

Сообщение от msheal

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

Сообщение было отмечено scherbakovss201 как решение

Решение

scherbakovss201, все работает верно

setInterval(function(){ window.scrollTo(0,document.body.scrollHeight); }, 2000)

Сообщение от msheal

верно,проверил.Скролит до конца.Только консоль браузера пишет.Наверное это политика безопастности контента.

content.js:1 Uncaught TypeError: Cannot read property ‘defaultView’ of null
at p._getElementStyles (content.js:1)
at p._isTrimmingByOverflow (content.js:1)
at p.findTrimmingParent (content.js:1)
at p.getTrimmedBounds (content.js:1)
at p._appendOpaque (content.js:1)
at p.getAllOpaques (content.js:1)
at l._getImageUnder (content.js:1)
at l._updateImage (content.js:1)
at l.imageUnderCursor (content.js:1)
at l.imgUnderCursor (content.js:1)

Источник

Перемещение окна и прокрутка страницы в JavaScript

В этой теме познакомимся с методами глобального объекта window, предназначенными для перемещения окна (moveTo и moveBy), изменения его размера (resizeTo, resizeBy) и выполнения прокрутки страницы (scrollTo и scrollBy).

Перемещение окна

В JavaScript имеются следующие методы объекта window для перемещения окна:

• moveTo – абсолютное перемещение окна в указанные координаты экрана;
• moveBy – перемещения окна на указанное количество пикселей относительно его текущего положения.

Синтаксис метода « window.moveTo »:

window.moveTo(x, y); // x и у – это координаты точки (соответственно горизонтальная и вертикальная), в которую необходимо переместить левый верхний угол окна браузера

Пример, в котором переместим окно в точку (50, 75):

Пример, в котором произведём перемещение окна в левый верхний угол экрана:

Синтаксис метода « window.moveBy »:

window.moveBy(deltaX, deltaY); // deltaX и deltaY – количество пикселей, на которое следует переместить окно соответственно по горизонтали и вертикали относительно его текущего положения

Например, сдвинем окно на 75px вправо и на 100px вниз:

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

• окно (или вкладка) должно быть создано с помощью window.open ;
• в окне не должно находиться более чем одной вкладки.

  . Открыть окно Переместить левый угол окна в точку (300,300) Переместить окно относительно его текущего положения на 50px вправо и на 50px вниз Переместить окно относительно его текущего положения на 50px влево Переместить окно относительно его текущего положения на 50px вправо Переместить окно относительно его текущего положения на 50px вверх Переместить окно относительно его текущего положения на 50px вниз

Изменение размеров окна

Методы объекта window для изменения размеров окна:

• resizeTo – изменяет ширину ( outerWidth ) и высоту ( outerHeight ) окна на указанные значения;
• resizeBy – изменяет ширину ( outerWidth ) и высоту ( outerHeight ) окна на указанные величины относительно его текущих размеров.

В JavaScript методы resizeTo и resizeBy выполняют эти действия только посредством изменения положения правого нижнего угла (координаты верхнего левого угла при этом остаются неизменными).

// width и height – новая ширина и высота окна в пикселях window.resizeTo(width, height);

Например, изменим ширину и высоту окна так, чтобы он занимал ¼ доступного экрана:

// получаем 1/2 доступной ширины экрана в пикселях const width = window.screen.availWidth / 2; // получаем 1/2 доступной высоты экрана в пикселях const height = window.screen.availHeight / 2; // устанавливаем окну ширину и высоту window.resizeTo(width, height);

window.resizeBy(deltaX, deltaY); // deltaX и deltaY – количество пикселей на которые нужно увеличить размеры окна соответственно по горизонтали и вертикали

Например, уменьшим размеры окна (его ширину и высоту) на 50px:

  . Открыть окно Изменить ширину и высоту окна браузера (300,300) Увеличить ширину и высоту окна браузера на 25px Уменьшить ширину окна на 25px Увеличить ширину окна на 25px Уменьшить высоту окна на 25px Увеличить высоту окна на 25px

Прокрутка документа

В JavaScript имеются следующие методы объекта window для прокрутки документа:

• scroll ( scrollTo ) — прокручивает страницу до указанного места в абсолютном выражении;
• scrollBy — прокручивает документ на определённое количество пикселей относительно текущей позиции.

Синтаксис метода scroll (метод scrollTo выполняет то же самое, что scroll и не отличается по синтаксису):

// 1 вариант window.scroll(left, top); // left - по оси Х, top - по оси Y // 2 вариант window.scroll({ left: 0, // до какого количества пикселей прокрутить вправо top: 0, // до какого количество пикселей прокрутить вниз behavior: 'auto'; // определяет плавность прокрутки: 'auto' - мгновенно (по умолчанию), 'smooth' - плавно });

Синтаксис метода scrollBy :

// 1 вариант window.scrollBy(left, top); // left - по оси Х, top - по оси Y // 2 вариант window.scrollBy({ left: 0, // на какое количество пикселей прокрутить вправо от текущей позиции top: 0, // на какое количество пикселей прокрутить вниз от текущей позиции behavior: 'auto'; // определяет плавность прокрутки: 'auto' - мгновенно (по умолчанию), 'smooth' - плавно });

Пример, в котором создадим 3 ссылки, при нажатии на которые будем вызывать метод scroll или scrollBy с определёнными значениями:

вниз мгновенно (до 2000) вниз плавно (на +200) вверх плавно (до 0)  

Источник