J'ai essayé d'obtenir un défilement pour que le code jquery div id fonctionne correctement. Sur la base d'une autre question de débordement de pile, j'ai essayé ce qui suit
DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/
$('#myButton').click(function() {
$.scrollTo($('#myDiv'), 1000);
});
Mais ça n'a pas marché. Il s'enclenche juste au div. J'ai aussi essayé
$('#myButton').click(function(event) {
event.preventDefault();
$.scrollTo($('#myDiv'), 1000);
});
Sans progrès.
javascript
jquery
scroll
StevenPHP
la source
la source
Réponses:
Vous devez animer le
html, body
DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/1/
la source
var target = $(this).data("target"); $(".basics-content").animate({scrollTop: $(target).offset().top}, 1000); });
Explication:.basics-content
est le div intérieur du modal vers lequel je veux réellement défiler, avectarget
le numéro d'identification de l'élément ...Si vous souhaitez remplacer la navigation href-id standard sur la page sans modifier le balisage HTML pour un défilement fluide , utilisez ceci ( exemple ):
la source
var pos = $(id).offset().top;
peut êtrevar pos = $id.offset().top;
voici mes 2 cents:
Javascript:
Html:
et la cible:
la source
eval
ici?$('html, body').animate
faire défilerVoici ce que j'utilise:
La beauté de celui-ci est que vous pouvez utiliser un nombre illimité de liens de hachage et d'identifiants correspondants sans avoir à exécuter un nouveau script pour chacun.
Si vous utilisez WordPress, insérez le code dans le
footer.php
fichier de votre thème juste avant la balise de fermeture du corps</body>
.Si vous n'avez pas accès aux fichiers de thème, vous pouvez incorporer le code directement dans l'éditeur de publication / page (vous devez modifier la publication en mode Texte) ou sur un widget Texte qui se chargera sur toutes les pages.
Si vous utilisez un autre CMS ou simplement du HTML, vous pouvez insérer le code dans une section qui se charge sur toutes les pages juste avant la balise de fermeture
</body>
.Si vous avez besoin de plus de détails à ce sujet, consultez mon article rapide ici: jQuery smooth scroll to id
J'espère que cela vous aidera et faites-moi savoir si vous avez des questions à ce sujet.
la source
un exemple de plus:
Lien HTML:
JS:
Ancre HTML:
la source
êtes-vous sûr de charger le fichier jQuery scrollTo Plugin?
vous obtenez peut-être un objet: méthode introuvable erreur "scrollTo" dans la console.
la méthode scrollTO n'est pas une méthode jquery native. pour l'utiliser, vous devez inclure le fichier de plugin jquery scroll To.
réf: http://flesler.blogspot.in/2009/05/jqueryscrollto-142-released.html http://flesler.blogspot.in/2007/10/jqueryscrollto.html
soln: ajoutez ceci dans la section head.
la source
Ce script est une amélioration du script de Vector. J'y ai fait un petit changement. Donc, ce script fonctionne pour chaque lien avec le défilement de page de la classe.
Au début sans assouplissement:
Pour faciliter, vous aurez besoin de l'interface utilisateur Jquery:
Ajoutez ceci au script:
Final
Toutes les assouplissements que vous pouvez trouver ici: Cheat Sheet .
la source
Ce code sera utile pour tout lien interne sur le web
la source
Cela peut être fait en JS simple:
La prise en charge du navigateur est un peu problématique, mais les navigateurs modernes la prennent en charge .
la source
Vous pouvez le faire en utilisant le code jQuery simple suivant.
Le didacticiel, la démo et le code source peuvent être trouvés à partir d'ici - Défilement fluide pour diviser en utilisant jQuery
JavaScript:
HTML:
la source
Ici, j'ai essayé cela, qui fonctionne très bien pour moi.
HTML:
la source
Ceci est le plus simple.Source- https://www.w3schools.com/jsref/met_element_scrollintoview.asp
la source
Cela fonctionne pour moi.
Merci.
la source
Voici ma solution pour lisser le défilement vers div / anchor en utilisant jQuery au cas où vous avez un en-tête fixe afin qu'il ne défile pas en dessous. Cela fonctionne également si vous le liez à partir d'une autre page.
Remplacez simplement ".site-header" pour div qui contient votre en-tête.
la source