Загрузите уже загруженную веб-страницу вниз - PullRequest
Новая
       22

Загрузите уже загруженную веб-страницу вниз

2 голосов
/ 26 января 2012

В настоящее время я пытаюсь найти способ заставить сайт загружаться и уже прокручиваться вниз.

Например ...

CSS 

body {
height:2000px;  
}

#red-box {
position:absolute;
width:100%;
height:150px;
background-color:red;
}

#blue-box {
position:absolute;
width:100%;
height:500px;
margin-top:150px;
background-color:blue;
}

HTML 

<div id="red-box"></div>
<div id="blue-box"></div>

Могу ли я в любом случае сделать так, чтобы веб-страница уже была прокручена достаточно далеко, чтобы красный блок div уже находился в верхней части страницы. Другими словами, страница уже прокрутилась вниз на 150 пикселей (высота красного поля), когда она загружается, и для того, чтобы увидеть красное поле, пользователь должен будет вручную прокрутить назад.

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

JavaScript 

$(window).scroll(function(event) {
   window.scrollTo(0,150);
});

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

Я не лучший в JavaScript ... Я думаю, что моя проблема может быть связана с 

$(window).scroll(function(event) {
});

раздел. Как мне кажется 

   window.scrollTo(0,150);

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

Я создал JSFiddle , чтобы попытаться продемонстрировать немного яснее.

Кто-нибудь может мне помочь?

Ответы [ 3 ]

4 голосов
/ 26 января 2012

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

$(function() {
   window.scrollTo(0,150);
});

Чтобы сделать это прекрасно, выделите красную рамку, используйте этот код. offset() метод дает верхнюю / левую позицию элемента относительно документа. 

$(function(){
   window.scrollTo(0, $('#red-box').offset().top));
});
1 голос
/ 26 января 2012

JavaScript прав. Уже опубликованные предложения должны работать нормально, за исключением того, что Шанкар потребует от вас сначала включить любую библиотеку.

Вы используете библиотеку? Например, jQuery, прототип и т. Д. Специальные символы в вашем первом фрагменте кода обозначают библиотеку - если вы не включили ее до этого сценария в документ, этот сценарий не будет работать.

Кроме того, если вам интересно:

$(window) переносит объект окна в область видимости библиотеки. .scroll обозначает метод, а (function(event) { }); является обратным вызовом.

1 голос
/ 26 января 2012

Вы можете обернуть ваш метод scrollTo() в самопровозглашенную анонимную функцию, чтобы он автоматически выполнялся без необходимости создания экземпляра объекта jQuery.

(function() { window.scrollTo(0,150); })();

Или еще прощевставьте его в тег <body>.

<body onload="window.scrollTo(0,150);">

...