JQuery прокрутите страницу вниз

Я использую следующее, чтобы перейти к верхней части страницы, когда вы нажимаете на определенную ссылку.

$('.myLinkToTop').click(function () {
    $('html, body').animate({scrollTop:0}, 'slow');
    return false;
});

Я хочу сделать еще одну ссылку, которая прокручивается в нижней части страницы. Следующее работает нормально. Я думаю, что он пытается прокрутить 1000 пикселей вниз по странице, поэтому, если страница короче, тогда она прокручивается быстрее, чем она должна, и если страница выше, тогда она не будет идти до конца. Как заменить "1000" на высоту окна? Спасибо

$('.myMenuLink').click(function () {
    $('html, body').animate({scrollTop:1000}, 'slow');
    return false;
});

Я знаю, что этот код перескакивает в нижнюю часть страницы, но он прокручивается плавно, как мне нужно:

$(document).scrollTop($(document).height());

Ответы

Ответ 1

Ваше требование о анимации и перемещении в нижней части документа может быть достигнуто с помощью кода ниже

HTML

<html>
<head>
</head>
<body>
    <div style="height:1500px">
        <button class="myLinkToTop" id="but1" >1</button>
    </div>
        <button class="myMenuLink" id="but1" >2</button>
</body>
</html>

$('.myLinkToTop').click(function () {
    $('html, body').animate({
        scrollTop: $(document).height()
    }, 'slow');
    return false;
});

$('.myMenuLink').click(function () {
    $('html, body').animate({
        scrollTop:0
    }, 'slow');
    return false;
});

Обратитесь к этой ссылке

http://jsfiddle.net/q6Wsp/6/

Ответ 2

Вам нужно вычесть высоту видового экрана из scrollHeight:

$('#goToBottom').click(function(){

  var WH = $(window).height();  
  var SH = $('body').prop("scrollHeight");
  $('html, body').stop().animate({scrollTop: SH-WH}, 1000);

});

body{height:2000px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="goToBottom">GO TO BOTTOM</button>

Ответ 3

Попробуйте этот код

$(function () {
     $('#scrlBotm').click(function () {
         $('html, body').animate({
             scrollTop: $(document).height()
         },
         1500);
         return false;
     });

     $('#scrlTop').click(function () {
         $('html, body').animate({
             scrollTop: '0px'
         },
         1500);
         return false;
     });
 });

Ответ 4

Для очень длинных html-документов scrollTop: $(document).height() не работает, в этих случаях вы можете использовать:

$('html, body').animate({
    scrollTop: $('#endOfPage').offset().top
}, 1000);

в конце страницы поставьте a:

<div id="endOfPage">&nbsp;</div>

Ответ 5

код переходит в нижнюю часть страницы. С плавным:

$(document).ready(function() {

$('# selector'). click (function() { $ ('html, body'). animate ({ scrollTop: $(document).height() }, 1000); }); });

С помощью этого кода легко прокрутить страницу вниз.

Ответ 6

Чтобы перейти к нижней части страницы, попробуйте следующее:

        $('html, body').animate({
            scrollTop: $('html, body').height()
        }, 'slow');