Défilement fluide vers div id jQuery


248

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.



@TheVanillaThrilla Je l'ai fait mais cela semblait trop gonflé pour une seule utilisation du lien
StevenPHP

1
@StevenPHP, j'ai remplacé le code JavaScript dans votre exemple conformément à ma réponse stackoverflow.com/a/26129950/947687 . Et cela fonctionne jsfiddle.net/8tLdq/643 .
dizel3d

L'OP est vieux mais je partagerai ce post pour d'autres venant de SE. Voici un article qui partage une fonction simple résolvant le problème: smartik.ws/2015/01/…
Andrew Surdu

Réponses:


667

Vous devez animer le html, body

DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/1/

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

9
@vector J'ai un problème, une fois qu'il est cliqué, je dois me battre avec jquery pour faire défiler vers le haut, une solution?
YesItsMe

@yesitsme ... en haut ou en bas dans mon cas
Gray Spectrum

@GraySpectrum up, juste après avoir cliqué, sonne comme s'il y avait un retard.
YesItsMe

1
J'ai la même question, que se passe-t-il si j'ai quelques boutons qui doivent faire défiler vers différents emplacements, a essayé de modifier ce code mais cela ne fonctionne pas. Pourriez-vous s'il vous plaît fournir un autre exemple?
Dreadlord

J'ai trouvé un "correctif" pour cela. Le défilement de l' élément approprié est maintenant corrigé, mais il continue de monter et de descendre en cliquant sur la même cible de défilement: var target = $(this).data("target"); $(".basics-content").animate({scrollTop: $(target).offset().top}, 1000); });Explication: .basics-contentest le div intérieur du modal vers lequel je veux réellement défiler, avec targetle numéro d'identification de l'élément ...
Roland

111

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 ):

// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $id.offset().top;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});

3
Cela fonctionne bien, puis-je suggérer qu'un tout petit ajustement var pos = $(id).offset().top;peut êtrevar pos = $id.offset().top;
Davey

Très agréable. Si vous ne souhaitez que cela se produise sur certains liens (par exemple, vous en avez pour afficher ou masquer des informations), ajoutez-leur simplement un nom de classe et collez votre nom de classe (par exemple scroller) à la fin de la déclaration de correspondance (par exemple, un [href ^ = "#"]. scroller).
Privateer

Comment faites-vous cela sans jQuery?
Vadorequest

21

voici mes 2 cents:

Javascript:

$('.scroll').click(function() {
    $('body').animate({
        scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70)
    }, 1000);
});

Html:

<a class="scroll" target="contact">Contact</a>

et la cible:

<h2 id="contact">Contact</h2>

Cela semble fonctionner uniquement si vous ne déclarez pas doctype.
David Martins

6
À quoi sert evalici?
Voyant le

Je pense qu'il est nécessaire de $('html, body').animatefaire défiler
Irshad Khan

6

Voici ce que j'utilise:

<!-- jquery smooth scroll to id's -->   
<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
});
</script>

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.phpfichier 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.


Aimer à quel point c'est simple et vanillé, parfait.
DoPeT

5

un exemple de plus:

Lien HTML:

<a href="#featured" class="scrollTo">Learn More</a>

JS:

  $(".scrollTo").on('click', function(e) {
     e.preventDefault();
     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });

Ancre HTML:

  <div id="featured">My content here</div>

3

ê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.

<script src="\\path\to\the\jquery.scrollTo.js file"></script>

Cela aurait dû être la réponse acceptée. Le code de la question est correct et fonctionne correctement. Il semble que le plugin scrollTo ne fonctionne pas / ne fonctionnait pas. . Il n'a pas posé de questions sur les différentes façons de faire quelque chose de similaire.
Chris Kavanagh

3

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:

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000);
});

Pour faciliter, vous aurez besoin de l'interface utilisateur Jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Ajoutez ceci au script:

'easeOutExpo'

Final

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000, 'easeOutExpo');
});

Toutes les assouplissements que vous pouvez trouver ici: Cheat Sheet .


3

Ce code sera utile pour tout lien interne sur le web

    $("[href^='#']").click(function() {
        id=$(this).attr("href")
        $('html, body').animate({
            scrollTop: $(id).offset().top
        }, 2000);
    });


1

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:

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
        if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    });
});

HTML:

<a href="#section1">Go Section 1</a>
<div id="section1">
    <!-- Content goes here -->
</div>

1

Ici, j'ai essayé cela, qui fonctionne très bien pour moi.

$('a[href*="#"]').on('click', function (e) {
    e.preventDefault();

    $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 500, 'linear');
});

HTML:

 <a href="#fast-food" class="active" data-toggle="tab" >FAST FOOD</a>

<div id="fast-food">
<p> Scroll Here... </p>
  </div>

Qu'est-ce qui est différent dans votre réponse?
yunandtidus


0

Cela fonctionne pour moi.

<div id="demo">
        <h2>Demo</h2>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        // Handler for .ready() called.
        $('html, body').animate({
            scrollTop: $('#demo').offset().top
        }, 'slow');
    });
</script>

Merci.


0

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.

$(function() {

$('a[href*="#"]:not([href="#"])').click(function() {
var headerheight = $(".site-header").outerHeight();
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

  if (target.length) {
    $('html, body').animate({
      scrollTop: (target.offset().top - headerheight)
    }, 1000);
    return false;
  }
}
});

//Executed on page load with URL containing an anchor tag.
if($(location.href.split("#")[1])) {
var headerheight = $(".site-header").outerHeight();
  var target = $('#'+location.href.split("#")[1]);
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top - headerheight
    }, 1);
    return false;
  }
}
});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.