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


176

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

J'aimerais quelque chose où vous avez un lien comme ceci:

<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 ce lien est cliqué, la page glisse vers le haut ou vers le bas jusqu'à l'endroit souhaité (peut être un div, un titre, un haut de 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');
    });
});

Réponses:


427

La description

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

Découvrez la démonstration jsFiddle .

Échantillon

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

scrollToAnchor('id3');

Plus d'information


52
Cela peut également être rendu générique pour fonctionner avec tous les liens d'ancrage internes de la page:$("a[href^=#]").click(function(e) { e.preventDefault(); var dest = $(this).attr('href'); console.log(dest); $('html,body').animate({ scrollTop: $(dest).offset().top }, 'slow'); });
bardo

@bardo, comment est-il censé être implémenté? J'ai remplacé la solution de dkmaack par la vôtre, mais le glissement n'est pas là (l'ancre elle-même est fonctionnelle). Qu'est-ce que je rate?
jakub

1
@bardo ajoute également history.pushState(null, null, dest);car vous empêchez le changement de hachage de l'emplacement par défaut
Mike Causer

7
Pour info, en plus de la solution de @ bardo, vous devriez échapper au hachage lorsque vous utilisez le dernier jQuery comme ceci, $ ("a [href ^ = \\ #]") stackoverflow.com/questions/7717527/…
jaegs

1
Quel est le but de l'animation à la fois html et body? On dirait une situation où nous ne savons pas ce que nous faisons et faisons tout cela. Cela pourrait-il déclencher plusieurs scollings?
ygoe

30

En supposant que votre attribut href est lié à un div avec l' ID de balise du 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');
});

1
Solution très simple mais puissante, qui permet un contrôle complet. Je pense que cette réponse devrait susciter davantage de votes positifs.
cronfy le

D'accord, c'est la meilleure solution et m'a beaucoup aidé
probablement

Cela fonctionne mais va à l'encontre du but de l'utilisation name. Lorsque vous utilisez <a name="something"></a>, vous pouvez également le référencer de l'extérieur, mais votre solution ne le fournit pas.
Ramtin

8

Cela m'a rendu la vie tellement plus facile. Vous mettez essentiellement votre balise d'identification d'éléments et ses défilements jusqu'à elle sans beaucoup de code

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

En Javascript

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

Dans votre html

<div id="scroollto1">

Me voici tout le long de la page


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

3
Véritable question, est-ce que le + "" fait quelque chose dans la deuxième ligne?
Rob

@Rob javascript n'a pas d' interpolation de chaîne, donc en utilisant +des chaînes ou vars les concatène, comme: "#some_anchor". Vraiment, le deuxième concat anchor_id + ""n'est pas nécessaire, je crois.
onebree

Merci @onebree C'était le deuxième concat sur lequel je m'interrogeais :)
Rob

5

Vous devez également considérer que la cible a un remplissage et donc utiliser à la positionplace de offset. Vous pouvez également tenir compte d'une barre de navigation potentielle que vous ne souhaitez 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 });
})


Mais cela ne réécrit pas la balise d'ancrage dans l'url. Ajouter history.pushState({}, "", this.href);pour garder l'url à jour
KSPR

3

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

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

Soutien

  • Environnement multi-framework.
  • Avant la fin du chargement de la page.
<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);


1

Vous pouvez ajouter la valeur offsetTop et scrollTop au cas où vous n'animeriez 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);

0

Défilement lent SS

Cette solution ne nécessite pas de balises d'ancrage mais vous devez bien sûr faire correspondre le bouton de menu (attribut arbitraire, «ss» dans l'exemple) avec l'id de l'élément de destination dans votre html.

ss="about" vous emmène à id="about"

$('.menu-item').click(function() {
	var keyword = $(this).attr('ss');
	var scrollTo = $('#' + keyword);
	$('html, body').animate({
		scrollTop: scrollTo.offset().top
	}, 'slow');
});
.menu-wrapper {
  display: flex;
  margin-bottom: 500px;
}
.menu-item {
  display: flex;
  justify-content: center;
  flex: 1;
  font-size: 20px;
  line-height: 30px;
  color: hsla(0, 0%, 80%, 1);
  background-color: hsla(0, 0%, 20%, 1);
  cursor: pointer;
}
.menu-item:hover {
  background-color: hsla(0, 40%, 40%, 1);
}

.content-block-header {
  display: flex;
  justify-content: center;
  font-size: 20px;
  line-height: 30px;
  color: hsla(0, 0%, 90%, 1);
  background-color: hsla(0, 50%, 50%, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="menu-wrapper">
  <div class="menu-item" ss="about">About Us</div>
  <div class="menu-item" ss="services">Services</div>
  <div class="menu-item" ss="contact">Contact</div>
</div>

<div class="content-block-header" id="about">About Us</div>
<div class="content-block">
  Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.

That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>
<div class="content-block-header" id="services">Services</div>
<div class="content-block">
Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.

That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>
<div class="content-block-header" id="contact">Contact</div>
<div class="content-block">
  Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.

That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>

Violon

https://jsfiddle.net/Hastig/stcstmph/4/


0

Voici la solution qui a fonctionné pour moi. Il s'agit d'une fonction générique qui fonctionne pour toutes les abalises faisant référence à un noma

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

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

Remarque 2: dans certains cas, en particulier lorsque vous utilisez la barre collante du bootstrap, le nommé ase cachera sous la barre de navigation. Dans ces cas (ou dans tout cas similaire), vous pouvez réduire le nombre de pixels de votre parchemin pour obtenir l'emplacement optimal. Par exemple: vous $('html,body').animate({ scrollTop: $(target).offset().top - 15 }, 'slow');amènera au targetavec 15 pixels à gauche en haut.


0

Je suis tombé sur cet exemple sur https://css-tricks.com/snippets/jquery/smooth-scrolling/ expliquant chaque ligne de code. J'ai trouvé que c'était la meilleure option.

https://css-tricks.com/snippets/jquery/smooth-scrolling/

Vous pouvez devenir natif:

window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth' 
});

window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});

ou avec jquery:

$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(event) {

    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) {
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
      }
    }
  });

0

La méthode la plus simple est: -

Dans la fonction de clic (Jquery): -

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

HTML

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

-1
$(function() {
    $('a#top').click(function() {
        $('html,body').animate({'scrollTop' : 0},1000);
    });
});

Testez-le ici:

http://jsbin.com/ucati4


3
Veuillez ne pas inclure de signatures, en particulier celles avec des liens ... et en particulier celles avec des liens non liés. Vous pouvez mettre ce genre de chose dans votre profil.
Andrew Barber

La question posée n'était pas de savoir comment faire défiler vers le haut de la page, c'était comment faire défiler jusqu'à une ancre avec un identifiant
user1380540

Y a-t-il un moyen de l'utiliser dans WordPress? J'ajoute à mon site mais cela ne fonctionne pas vraiment. Voici le lien: scentology.burnnotice.co.za
user agent

-1

solution suivante a fonctionné pour moi:

$("a[href^=#]").click(function(e)
        {
            e.preventDefault();
            var aid = $(this).attr('href');
            console.log(aid);
            aid = aid.replace("#", "");
            var aTag = $("a[name='"+ aid +"']");
            if(aTag == null || aTag.offset() == null)
                aTag = $("a[id='"+ aid +"']");

            $('html,body').animate({scrollTop: aTag.offset().top}, 1000);
        }
    );
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.