Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как проскроллить вниз ровно на высоту экрана? (https://javascript.ru/forum/jquery/65570-kak-proskrollit-vniz-rovno-na-vysotu-ehkrana.html)

olegalimov 26.10.2016 11:23

Как проскроллить вниз ровно на высоту экрана?
 
Доброе время суток.
Нашел скрипт на jQerey, но он срабатывает один раз почему-то?
Вот сам скрипт.
$(document).ready ( function ( ) {
			$('#nav_down').fadeIn('slow');  
			var win = $(window).height () ;
			$( '#nav_down' ).click ( function ( ) {
			$( 'body,html' ).animate ( {
			scrollTop: win
			} , 800 ) ;
			return false ;
			} ) ;
			} ) ;

<div  class="nav_down" id="nav_down"></div>

При нажатии кнопки только один раз уходит вниз, при втором нажатие ни чего не происходит. я понимаю что надо писать вот так: scrollTop: '+=win' но, так не работает.
Помогите разобраться со скриптом.

ksa 26.10.2016 11:35

Цитата:

Сообщение от olegalimov
Как проскроллить вниз ровно на высоту экрана?

http://ukrdev.com.ua/ru/question/358...u-iekrana.html

olegalimov 26.10.2016 11:54

Цитата:

Сообщение от ksa (Сообщение 433000)

у меня эта ссылка не открывается! не знаю почему:cray:

ksa 26.10.2016 13:21

Цитата:

Сообщение от olegalimov
у меня эта ссылка не открывается!

У меня открывается...

Ну вот тебе еще одна...

olegalimov 26.10.2016 13:37

я открыл вашу ссылку там написано.
"Переменную win объявляйте после клика"
Хорошо написал так
$(document).ready ( function ( ) {
			$('#nav_up').fadeIn('slow');
			$('#nav_down').fadeIn('slow');  
			$( '#nav_down' ).click ( function ( ) {
			var win = $(window).height();
			$( 'body,html' ).animate ( {scrollTop: '+=win'} , 800 ) ;
			return false ;
			} ) ;
			} ) ;

Все равно не работает при втором нажатии

ksa 26.10.2016 13:56

Цитата:

Сообщение от olegalimov
не работает при втором нажатии

Так на N-ном разе нужно "скролить" на N-раз умноженное на win. :D

olegalimov 26.10.2016 14:14

Цитата:

Сообщение от ksa (Сообщение 433006)
Так на N-ном разе нужно "скролить" на N-раз умноженное на win. :D

Я понимаю что вам смешно, я не волшебник, а только учусь.
я в курсе что написал ошибку.
но как сделать?

ksa 26.10.2016 14:43

Цитата:

Сообщение от olegalimov
но как сделать?

Хранить где-то "счетчик"... Увеличивать его при каждом скроле...
Нужно учитывать так же, что сам пользователь может скрольнуть вниз или вверх, т.ч. и текущее положение придется анализировать на предмет "на какой странице я нахожусь" и "на какую мне скролить"...

Dilettante_Pro 26.10.2016 14:52

<div  class="nav_down" id="nav_down" style='position:fixed; left:100px;background-color:silver'>скролл вниз</div>
<div id = "container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready ( function ( ) {
    $('#nav_down').fadeIn('slow');  
    var win = $(window).height (),
         count = 1,
         content = "";
    for (var i=1;i<300;i++) content += i.toString() + "<br>";
    $('#container').html(content);
    $( '#nav_down' ).click ( function ( ) {
        $( 'body,html' ).animate ( {
           scrollTop: win * count
         } , 800 ) ;
         count++;
         return false ;
    } ) ;
} ) ;
</script>

ksa 26.10.2016 15:06

Dilettante_Pro, если самому скрольнуть колесом вниз, а потом нажать на "скролл вниз" - получается скролл вверх. ;)


Часовой пояс GMT +3, время: 02:08.