jQuery faire défiler vers le bas de la page

Im en utilisant ce qui suit pour faire défiler vers le haut d'une page lorsque vous cliquez sur un certain lien.jQuery faire défiler vers le bas de la page

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

Je veux faire un autre lien qui défile vers le bas de la page. Ce qui suit fonctionne bien. Je pense qu'il essaie de faire défiler 1000px vers le bas de la page, donc si la page est plus courte, elle défile plus vite qu'elle ne devrait, et si la page est plus grande, elle ne descendra pas tout en bas. Comment puis-je remplacer '1000' avec la hauteur de la fenêtre? Merci

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

Je sais que ce code passe au bas de la page, mais il doenst défiler en douceur comme je l'ai besoin:

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

Source

2012-11-27 Evans

vous devriez utiliser jquery plug-in faciliter et passer le paramètre comme swing, easeIn ou easeOut ce que vous voulez pour une transition en douceur – defau1t

Juste un rappel, le [ réponse actuellement acceptée] (http://stackoverflow.com/a/13583503/383904) est en fait incorrecte/incomplète (voir commentaire). –

Votre exigence pour animer et déplacer vers le bas du document peut être atteint par le code ci-dessous

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

Reportez-vous à ce lien

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

Source

2012-11-27 11:43:12

C'est un ** exemple incorrect **. Pendant l'animation vers le bas, le ** assouplissement ** n'a pas le temps de terminer correctement (ralentissement) la cause des mauvais calculs de hauteur - à la place, il atteint le fond à pleine vitesse. –

Essayez ce code

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

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

Source

2012-11-27 11:33:54 Hkachhia

Cela fonctionne mais l'animation est deux fois plus rapide qu'elle devrait l'être – Evans

Vous devez soustraire la hauteur de la fenêtre d'affichage à partir du 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>

Source

2012-11-27 11:40:21

Pour les documents html très longs scrollTop: $ (document) .height() échoue, dans ces cas, vous pouvez utiliser:

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

à la fin de la page mettre un:

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

Source

2014-07-19 17:27:15 surfealokesea

saute code au bas de la page avec douceur:

$ (document) .ready (function() {

$ ('# sélecteur'). Cliquez sur (function() { $ ('html, body'). Animent ({ scrollTop : $ (document) .height() }, 1000); }); });

Avec ce code facile de faire défiler la page vers le bas.

Source

2014-09-11 11:21:36

Pour faire défiler vers le bas de la page, essayez ceci:

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

Source

2017-11-21 10:10:26

jQuery faire défiler vers le bas de la page

Répondre

Questions connexes