Défilement fluide vers div id jQuery

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.

Vous devez animer le html, body

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

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

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

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>

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.

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>

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

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 .

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

Cela peut être fait en JS simple:

document
    .getElementById("range-calculator")
    .scrollIntoView({ behavior: "smooth" });

La prise en charge du navigateur est un peu problématique, mais les navigateurs modernes la prennent en charge .

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>

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>

Ceci est le plus simple.Source- https://www.w3schools.com/jsref/met_element_scrollintoview.asp

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

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.

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