web-dev-qa-db-fra.com

Défilement lisse pour div id jQuery

J'ai essayé d'obtenir un parchemin pour div code id JQuery pour fonctionner correctement. Basé sur 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 suffit de cliquer sur la div. J'ai aussi essayé

$('#myButton').click(function(event) {
     event.preventDefault();
   $.scrollTo($('#myDiv'), 1000);
});

Sans progrès.

javascriptjqueryscroll
193
StevenPHP

Vous devez animer le html, body

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

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

Si vous souhaitez remplacer la navigation standard href-id sur une page sans modification du balisage HTML pour défilement continu, 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});
});
92
dizel3d

voici mes 2 centimes:

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>
17
Alexandre Mélard

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 les identifiants correspondants sans avoir à exécuter un nouveau script pour chacun. 

Si vous utilisez WordPress, insérez le code dans le fichier footer.php de votre thème juste avant la balise body fermeture </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 dans un widget Texte qui se chargera sur toutes les pages.

Si vous utilisez un autre système de gestion de contenu ou seulement du code HTML, vous pouvez insérer le code dans une section qui se charge sur toutes les pages juste avant la balise de corps 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-le moi savoir si vous avez des questions à ce sujet. 

4
Bibiano Wenceslao

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
Eugen

êtes-vous sûr de charger le fichier plug-in jQuery scrollTo?

vous obtiendrez peut-être un objet: méthode introuvable erreur "scrollTo" dans la console.

la méthode scrollTO n'est pas une méthode native jquery. pour l'utiliser, vous devez inclure le fichier jquery scroll To plugin.

ref: http://flesler.blogspot.in/2009/05/jqueryscrollto-142-released.htmlhttp://flesler.blogspot.in/2007/10/jqueryscrollto. html

soln: ajoutez ceci dans la section head.

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

Ce script est une amélioration du script de Vector. J'ai apporté un petit changement à cela. Donc, ce script fonctionne pour chaque lien avec le défilement de page de la classe.

Au début sans relâchement:

$("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');
});

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

2
Ramon Weijenbarg

Ici, j'ai essayé ça, ça marche 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>
1
waqas noor

Vous pouvez le faire en utilisant le code jQuery simple suivant.

Vous pouvez trouver le code du didacticiel, de la démonstration et du code source à partir d’ici - Lisser le défilement vers div 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
JoyGuru

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
Y. Joy Ch. Singha

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

C'est la plus simple.Source - https://www.w3schools.com/jsref/met_element_scrollintoview.asp

var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
0
BHISM NARAYAN