Comment faire défiler la page vers le haut ou le bas jusqu'à une ancre en utilisant jQuery ?

Question

Je cherche un moyen d'inclure un effet de diapositive lorsque vous cliquez sur un lien vers une ancre locale, vers le haut ou vers le bas de la page.

Je voudrais quelque chose où vous avez un lien comme ça :

<a href="#nameofdivetc">link text, img etc.</a>

peut-être avec une classe ajoutée pour que vous sachiez que vous voulez que ce lien soit un lien coulissant :

<a href="#nameofdivetc" class="sliding-link">link text, img etc.</a>

Ensuite, si l'on clique sur ce lien, la page se déplace vers le haut ou le bas jusqu'à l'endroit voulu (il peut s'agir d'un div, d'un titre, du haut de la page, etc.)

---

C'est ce que j'avais précédemment :

    $(document).ready(function(){
    $(".scroll").click(function(event){
        //prevent the default action for the click event
        event.preventDefault();

        //get the full url - like mysitecom/index.htm#home
        var full_url = this.href;

        //split the url by # and get the anchor target name - home in mysitecom/index.htm#home
        var parts = full_url.split("#");
        var trgt = parts[1];

        //get the top offset of the target anchor
        var target_offset = $("#"+trgt).offset();
        var target_top = target_offset.top;

        //goto that anchor by setting the body scroll top to anchor top
        $('html, body').animate({scrollTop:target_top}, 1500, 'easeInSine');
    });
});

Answer 1

Mon approche avec jQuery consiste à faire glisser tous les liens d'ancrage intégrés au lieu de les faire sauter instantanément.

C'est vraiment similaire à la réponse de Santi Nunez mais c'est plus fiable .

Soutien

• Environnement multi-framework.

• Avant que la page n'ait fini de se charger.

  <a href="#myid">Go to</a> <div id="myid"></div>

  // Slow scroll with anchors (function($){ $(document).on('click', 'a[href^=#]', function(e){ e.preventDefault(); var id = $(this).attr('href'); $('html,body').animate({scrollTop: $(id).offset().top}, 500); }); })(jQuery);

Answer 2

Voici la solution qui a fonctionné pour moi. Il s'agit d'une fonction générique qui fonctionne pour tous les modèles de a qui font référence à une a

$("a[href^=#]").on('click', function(event) { 
    event.preventDefault(); 
    var name = $(this).attr('href'); 
    var target = $('a[name="' + name.substring(1) + '"]'); 
    $('html,body').animate({ scrollTop: $(target).offset().top }, 'slow'); 
});

Note 1 : Assurez-vous que vous utilisez des guillemets doubles. " dans votre html. Si vous utilisez des guillemets simples, changez la partie du code ci-dessus en var target = $("a[name='" + name.substring(1) + "']");

Note 2 : Dans certains cas, notamment lorsque vous utilisez la barre adhésive du bootstrap, le fichier nommé a se cachera sous la barre de navigation. Dans ces cas (ou tout autre cas similaire), vous pouvez réduire le nombre de pixels de votre défilement pour obtenir l'emplacement optimal. Par exemple : $('html,body').animate({ scrollTop: $(target).offset().top - 15 }, 'slow'); vous amènera à la target avec 15 pixels restants en haut.

Answer 3

J'ai conservé mon code d'origine et j'ai également inclus un lien "back-to-top" en fondu utilisant ce code et un peu d'ici aussi :

http://webdesignerwall.com/tutorials/animated-scroll-to-top

Fonctionne bien :)

Answer 4

Ok la méthode la plus simple est : -

Dans le cadre de la fonction de clic (Jquery) : -.

$('html,body').animate({scrollTop: $("#resultsdiv").offset().top},'slow');

HTML

<div id="resultsdiv">Where I want to scroll to</div>

Answer 5

Vous pouvez ajouter offsetTop y scrollTop valeur dans le cas où vous n'animez pas la page entière, mais plutôt un contenu imbriqué.

Par exemple :

var itemTop= $('.letter[name="'+id+'"]').offset().top;
var offsetTop = $someWrapper.offset().top;
var scrollTop = $someWrapper.scrollTop();
var y = scrollTop + letterTop - offsetTop

this.manage_list_wrap.animate({
  scrollTop: y
}, 1000);