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

Description

Vous pouvez le faire en utilisant jQuery.offset() y jQuery.animate() .

Consultez le Démonstration de jsFiddle .

Echantillon

function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

scrollToAnchor('id3');

Plus d'informations

• Démonstration de jsFiddle
• jQuery.offset()
• jQuery.animate()

Answer 2

En supposant que votre href est lié à un div avec l'étiquette id avec le même nom (comme d'habitude), vous pouvez utiliser ce code :

HTML

<a href="#goto" class="sliding-link">Link to div</a>

<div id="goto">I'm the div</div>

JAVASCRIPT - (Jquery)

$(".sliding-link").click(function(e) {
    e.preventDefault();
    var aid = $(this).attr("href");
    $('html,body').animate({scrollTop: $(aid).offset().top},'slow');
});

Answer 3

function scroll_to_anchor(anchor_id){
    var tag = $("#"+anchor_id);
    $('html,body').animate({scrollTop: tag.offset().top},'slow');
}

Answer 4

Cela a rendu ma vie tellement plus facile. Vous mettez simplement la balise id de votre élément et il défile vers lui sans beaucoup de code.

http://balupton.github.io/jquery-scrollto/

En Javascript

$('#scrollto1').ScrollTo();

Dans votre html

<div id="scroollto1">

Ici, je suis tout en bas de la page

Answer 5

Vous devez également tenir compte du fait que la cible dispose d'un rembourrage et utiliser ainsi position au lieu de offset . Vous pouvez également tenir compte d'une éventuelle barre de navigation qui ne doit pas chevaucher la cible.

const $navbar = $('.navbar');

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

    const scrollTop =
        $($(this).attr('href')).position().top -
        $navbar.outerHeight();

    $('html, body').animate({ scrollTop });
})