2016-10-30 1 views
0

довольно новый для js. У меня есть простой проект, в котором все, что у меня есть, - это изображение, вдвое превышающее высоту экрана. Я хочу, чтобы веб-страница открывалась в нижней части страницы, поэтому я добавил метод funtion «window.scroll» в javascript. Это прекрасно работает ... большую часть времени. Иногда, особенно если я тестирую мобильное устройство с домашним сервером, javascript просто не запускается и страница начинается сверху. Поэтому мой главный вопрос: есть ли способ сделать то же самое, что и «window.scroll», но с CSS, минуя js вообще? И второй вопрос, который у меня возникнет, - почему javascript настолько flaky? Я действительно новичок в веб-разработке, и я уже дважды (в другое время с методом «слайд») должен был использовать css вместо js, потому что js не работает должным образом, или его нужно кэшировать и т. Д. ... это нормальный behaivour или просто мне очень плохо писать его в этот момент? Спасибо за ваше время. PJavaScript неустойчивый с отправной точкой funciton

Вот простой код:

$(document).ready(function(){ 
 

 
    window.scroll(0,2000); 
 

 
});
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
img { 
 
    width: 100%; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    \t <title>Test</title> 
 
    \t <link rel="stylesheet" type="text/css" href="styles.css"> 
 
    \t <script type="text/javascript" src="jquery.js"></script> 
 
    \t <script type="text/javascript" src="script.js"></script> 
 
    
 
    </head> 
 
    <body> 
 
     <img src="https://pixabay.com/static/uploads/photo/2016/10/18/21/22/california-1751455_960_720.jpg" width="100%" style="display: block;"> 
 
    </body> 
 
    </html>

CSS:

body { 
    margin: 0px; 
    padding: 0px; 
} 

img { 
    width: 100%; 
} 

JavaScript:

$(document).ready(function(){ 

    window.scroll(0,2000); 

}); 

ответ

0

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

попробуйте этот код вместо:

$(window).on("load", ,function(){ 

    window.scroll(0,2000); 

}); 
+0

Ok спасибо, я пишу свой код вместо $ (документ) .ready функция (функция() или вместо него у меня есть другие функции, которые я бегу внутри? функция document.ready – Paul

+0

@Paul Этот код заменяет вас JavaScript. –

+1

Я бы также предложил использовать что-то вроде 'window.scroll (0, document.body.clientHeight);' если вы хотите прокрутить страницу до конца, всегда будет прокручиваться донизу, независимо от того, насколько высок контент (т. е. вы можете избежать жесткого кодированного значения и позволить браузеру работать для вас. – Dymos