jQuery przewiń do dołu strony

Korzystając z poniższych elementów, przewiń do góry strony po kliknięciu określonego linku.jQuery przewiń do dołu strony

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

Chcę utworzyć kolejny link, który przewija się na dół strony. Następujące działa poprawnie. Wydaje mi się, że próbuje przewinąć stronę o ponad 1000 pikseli, więc jeśli strona jest krótsza, przewija się szybciej, niż powinna, a jeśli strona jest wyższa, to nie przejdzie na sam dół. Jak mogę zamienić "1000" na wysokość okna? Dzięki

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

wiem, że ten kod skacze do dołu strony, ale doenst przewijać płynnie jak muszę:

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

Źródło

2012-11-27 Evans

należy używać jQuery złagodzenie wtyczki i przekazać parametr jak huśtawka, easeIn lub easeOut cokolwiek chcesz na płynne przejście – defau1t

tylko przypomnienie, w [ obecnie zaakceptowana odpowiedź] (http://stackoverflow.com/a/13583503/383904) jest rzeczywiście niepoprawna/niekompletna (patrz komentarz). –

swoje wymagania do animacji i przejść do dolnej części dokumentu mogą być osiągnięte przez kod poniżej

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; 
});

Patrz do ten link

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

Źródło

2012-11-27 11:43:12

To jest ** niepoprawny przykład **. Podczas animacji do dołu ** luzowanie ** nie ma czasu na prawidłowe zakończenie (spowolnienie) przyczyny błędnych obliczeń wysokości - zamiast tego uderza na dole z pełną prędkością. –

Spróbuj kod

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

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

Źródło

2012-11-27 11:33:54 Hkachhia

Działa, ale animacja jest dwa razy szybsza, niż powinna być – Evans

Musisz odjąć wysokość rzutni od 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>

Źródło

2012-11-27 11:40:21

W przypadku bardzo długich dokumentów html scrollTop: $ (document) .height() nie powiedzie się, w takich przypadkach można użyć:

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

na koniec strony wstawić:

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

Źródło

2014-07-19 17:27:15 surfealokesea

kod przeskakuje na dół strony Z płynnie:

$ (document) .ready (function() {

$ ('# selektor'). Kliknij (function() { $ ('html, body'). Animate ({ scrollTop : $ (document) .height() }, 1000); }); });

Ten kod ułatwia przewijanie strony w dół.

Źródło

2014-09-11 11:21:36

Aby przewinąć do dołu strony spróbuj tego:

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

Źródło

2017-11-21 10:10:26

jQuery przewiń do dołu strony

Odpowiedz

Powiązane problemy