J'ai le code jQuery suivant
$(document).ready(function () {
$('.navtoTop').click(function(){
$("html").scrollTop( $("#topofthePage").offset().top );
});
});
où 'navtoTop' est la classe du bouton (quelque chose comme 'Back to top') qui a la position fixe en bas à gauche de la page et 'topofthePage' est l'id du <div>
tout en haut de la page.
J'ai même essayé cela
$('.navtoTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
Voici le code html
<body>
<div id="topofthePage"></div>
...
...
<img src="navtoTop.png" class="navtoTop">
</body>
Je ne sais pas ce qui ne va pas, mais ça ne marche pas. Est-ce que quelqu'un va expliquer et donner une bonne solution?
Demandez-moi le détail du code si vous voulez.
Vous devez utiliser window
au lieu de html
:
$(window).scrollTop( $("#topofthePage").offset().top );
Notez que window
ne doit pas être placé entre guillemets car c’est un objet et non une balise.
Un problème courant avec scrollTo est le dépassement de capacité défini sur l'élément "html, body" dans css. Rarement mentionné lorsqu’il ya des problèmes de défilement/animation sur des éléments html/body et peut aboutir à une sur-ingénierie excessive.
Si le dépassement de capacité doit être défini, placez-le uniquement sur l'élément body . Pas tous les deux html, body.
C'est également une bonne habitude d'utiliser un attribut data- * à la place de classes ou d'identifiants dans votre code HTML. Cela vous donne l’habitude de séparer les styles du code. Considérez ceci pour vous rendre la vie plus facile à l'avenir:
Créer une fonction de défilement réutilisable
scrollioreceiver = function(sender) {
$(sender).on({
click: sentFrom
});
function sentFrom(){
var dataMine = $(this).attr('data-sender'),
dataSend = $('[data-receiver="'+dataMine+'"]');
$('html, body').animate({
scrollTop: $(dataSend).offset().top - 70
}, 800, function() {
// if you need a callback function
});
}
}
Créez des attributs de données pour les éléments HTML (nom-donnée est arbitraire et devrait avoir un sens):
AJOUTER UN LIEN HTML
<a data-sender="ScrollToMatch">Link To Click To Scroll To Match Attribute</a>
AJOUTER UN ELEMENT HTML
<div data-receiver="ScrollToMatch">Scrolls To This Element</div>
VERIFY CSS »Le débordement ajouté à" html, body "ne fonctionnera pas
body { overflow-x: hidden; }
INIT FUNCTION ON READY »Initialise sur doc ready avec sélecteur de nom d'attribut pour créer de la flexibilité pour plusieurs appels
scrollioreceiver('[data-sender]');
J'espère que cela t'aides!
Vous avez déjà une réponse à ce sujet. Mais comme vous souhaitez également un défilement régulier, envisagez l’alternative suivante:
$('.navtoTop').click(function(){
$('html, body').animate({
scrollTop: $('#topofthePage').offset().top
}, 1000);
});