Wie scrolle ich mit jQuery auf der Seite nach oben oder unten zu einem Anker?

176

Ich suche nach einer Möglichkeit, einen Folieneffekt einzufügen, wenn Sie auf einen Link zu einem lokalen Anker auf der Seite klicken.

Ich möchte etwas, wo Sie einen Link wie folgt haben:

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

Möglicherweise wurde eine Klasse hinzugefügt, damit Sie wissen, dass dieser Link ein Gleitlink sein soll:

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

Wenn Sie dann auf diesen Link klicken, wird die Seite an der gewünschten Stelle nach oben oder unten verschoben (dies kann ein Div, eine Überschrift, ein Seitenanfang usw. sein).


Das hatte ich vorher:

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

Antworten:

427

Beschreibung

Sie können dies mit jQuery.offset()und tun jQuery.animate().

Schauen Sie sich die jsFiddle-Demonstration an .

Stichprobe

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

scrollToAnchor('id3');

Mehr Informationen

dknaack
quelle
52
Dies kann auch generisch gemacht werden, um mit allen internen Ankerlinks auf der Seite zu funktionieren:$("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, wie soll es umgesetzt werden? Ich habe die Lösung von dkmaack durch Ihre ersetzt, aber das Schieben ist nicht vorhanden (der Anker selbst ist funktionsfähig). Was vermisse ich?
Jakub
1
@bardo auch hinzufügen, history.pushState(null, null, dest);wie Sie die Standard-Standort-Hash-Änderung verhindern
Mike Causer
7
Zu Ihrer
Information:
1
Was ist der Zweck, sowohl HTML als auch Body zu animieren? Sieht aus wie eine Situation, in der wir nicht wissen, was wir tun und einfach alles tun. Könnte dies zu mehreren Scollings führen?
Ygoe
28

Angenommen, Ihr href- Attribut ist mit einem div mit der Tag- ID mit demselben Namen verknüpft (wie üblich), können Sie diesen Code verwenden:

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');
});
Santi Nunez
quelle
1
Sehr einfache und dennoch leistungsstarke Lösung, die eine vollständige Kontrolle ermöglicht. Ich denke, diese Antwort sollte mehr positive Stimmen bekommen.
Cronfy
Einverstanden, dies ist die beste Lösung und hat mir sehr geholfen
wahrscheinlich am
Es funktioniert, macht aber den Verwendungszweck zunichte name. Wenn Sie es verwenden <a name="something"></a>, können Sie es auch von außen referenzieren, Ihre Lösung bietet dies jedoch nicht.
Ramtin
8

Das hat mir das Leben so viel leichter gemacht. Sie fügen im Grunde Ihr Element-ID-Tag und seine Scrolls ohne viel Code ein

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

In Javascript

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

In Ihrem HTML

<div id="scroollto1">

Hier bin ich ganz unten auf der Seite

Bobthenob
quelle
7
function scroll_to_anchor(anchor_id){
    var tag = $("#"+anchor_id+"");
    $('html,body').animate({scrollTop: tag.offset().top},'slow');
}
Ipegasus
quelle
3
Echte Frage, macht das + "" etwas in der zweiten Zeile?
Rob
@Rob Javascript hat keine String-Interpolation, daher +verkettet die Verwendung mit Strings oder Vars diese wie : "#some_anchor". Wirklich, der zweite Concat anchor_id + ""wird nicht benötigt, glaube ich.
Onebree
Danke @onebree Es war das zweite Konzert, über das ich mich gewundert habe :)
Rob
5

Sie sollten auch berücksichtigen, dass das Ziel eine Polsterung hat und daher positionanstelle von verwenden offset. Sie können auch eine potenzielle Navigationsleiste berücksichtigen, die das Ziel nicht überlappen soll.

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

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

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

    $('html, body').animate({ scrollTop });
})
Matt
quelle
IMHO die beste Lösung, weil es keine zusätzlichen Klassen und nervige Auffüllmathematik in der CSS für feste Navigationsleisten benötigt
KSPR
Dadurch wird das Ankertag in der URL jedoch nicht neu geschrieben. Hinzufügen history.pushState({}, "", this.href);, um die URL
KSPR
3

Mein Ansatz mit jQuery, einfach alle eingebetteten Ankerlinks zu verschieben, anstatt sofort zu springen

Es ist der Antwort von Santi Nunez sehr ähnlich, aber zuverlässiger .

Unterstützung

  • Multi-Framework-Umgebung.
  • Bevor die Seite vollständig geladen wurde.
<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);
Timo Huovinen
quelle
1

Sie können den Wert offsetTop und scrollTop hinzufügen, falls Sie nicht die gesamte Seite, sondern verschachtelten Inhalt animieren.

z.B :

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);
TuxujPes
quelle
0

SS Langsamer Bildlauf

Diese Lösung erfordert keine Ankertags, aber Sie müssen natürlich die Menüschaltfläche (beliebiges Attribut, z. B. 'ss') mit der Zielelement-ID in Ihrem HTML-Code abgleichen.

ss="about" bringt dich zu 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>

Geige

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

Hastig Zusammenstellen
quelle
0

Hier ist die Lösung, die für mich funktioniert hat. Dies ist eine generische Funktion, die für alle aTags funktioniert, die sich auf einen Namen beziehena

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

Hinweis 1: Stellen Sie sicher, dass Sie "in Ihrem HTML-Code doppelte Anführungszeichen verwenden . Wenn Sie einfache Anführungszeichen verwenden, ändern Sie den obigen Teil des Codes invar target = $("a[name='" + name.substring(1) + "']");

Hinweis 2: In einigen Fällen, insbesondere wenn Sie die Sticky-Leiste vom Bootstrap aus verwenden, wird der Name aunter der Navigationsleiste ausgeblendet. In diesen Fällen (oder einem ähnlichen Fall) können Sie die Anzahl der Pixel in Ihrem Bildlauf reduzieren, um die optimale Position zu erzielen. Zum Beispiel: $('html,body').animate({ scrollTop: $(target).offset().top - 15 }, 'slow');bringt Sie zu dem targetmit 15 Pixeln oben links.

Ramtin
quelle
0

Ich bin auf dieses Beispiel unter https://css-tricks.com/snippets/jquery/smooth-scrolling/ gestoßen, in dem jede Codezeile erklärt wurde. Ich fand das die beste Option.

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

Sie können einheimisch werden:

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

oder mit 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);
      }
    }
  });
Frankey
quelle
0

Ok einfachste Methode ist: -

Innerhalb der Klickfunktion (Jquery): -

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

HTML

<div id="resultsdiv">Where I want to scroll to</div>
Mikeys4u
quelle
-1
$(function() {
    $('a#top').click(function() {
        $('html,body').animate({'scrollTop' : 0},1000);
    });
});

Testen Sie es hier:

http://jsbin.com/ucati4

Sabi Singh
quelle
3
Bitte fügen Sie keine Signaturen bei, insbesondere solche mit Links ... und insbesondere solche mit nicht verwandten Links. Sie können so etwas in Ihr Profil aufnehmen.
Andrew Barber
Die gestellte Frage war nicht, wie man zum Anfang der Seite
scrollt
Gibt es eine Möglichkeit, wie ich das in WordPress verwenden kann? Ich füge meiner Website etwas hinzu, aber es funktioniert nicht wirklich. Hier der Link: Duftologie.burnnotice.co.za
Benutzeragent
-1

Folgende Lösung hat bei mir funktioniert:

$("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);
        }
    );
Behrouz.M
quelle