Jak przewinąć stronę w górę lub w dół do kotwicy za pomocą jQuery?

176

Szukam sposobu na włączenie efektu slajdu po kliknięciu łącza do lokalnej kotwicy w górę lub w dół strony.

Chciałbym coś, gdzie masz taki link:

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

być może z dodaną klasą, więc wiesz, że chcesz, aby ten link był linkiem przesuwnym:

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

Następnie po kliknięciu tego łącza strona przesuwa się w górę lub w dół do wymaganego miejsca (może to być element div, nagłówek, góra strony itp.).


Oto, co miałem wcześniej:

    $(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
źródło

Odpowiedzi:

427

Opis

Możesz to zrobić za pomocą jQuery.offset()i jQuery.animate().

Sprawdź demonstrację jsFiddle .

Próba

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

scrollToAnchor('id3');

Więcej informacji

dknaack
źródło
52
Można to również ustawić jako ogólne, aby działało ze wszystkimi wewnętrznymi linkami zakotwiczenia na stronie:$("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, jak to ma być realizowane? Wymieniłem rozwiązanie dkmaack na twoje, ale nie ma ślizgu (sama kotwica jest sprawna). czego mi brakuje?
jakub
1
@bardo dodaj również, history.pushState(null, null, dest);ponieważ zapobiegasz zmianie domyślnego skrótu lokalizacji
Mike Causer
7
Do Twojej wiadomości, oprócz rozwiązania @ bardo, powinieneś uciec przed hashem podczas korzystania z najnowszego jQuery, takiego jak to, $ ("a [href ^ = \\ #]") stackoverflow.com/questions/7717527/…
jaegs
1
Jaki jest cel animowania treści HTML ORAZ treści? Wygląda na to, że nie wiemy, co robimy i po prostu robimy to wszystko. Czy to może rozpocząć wiele przewijania?
ygoe
30

Zakładając, że Twój atrybut href prowadzi do elementu div o identyfikatorze tagu o tej samej nazwie (jak zwykle), możesz użyć tego kodu:

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
źródło
1
Bardzo proste, ale potężne rozwiązanie, które umożliwia pełną kontrolę. Myślę, że ta odpowiedź powinna uzyskać więcej głosów pozytywnych.
cronfy
Zgoda, to najlepsze rozwiązanie i bardzo mi pomogło
prawdopodobnie najlepsze
Działa, ale pokonuje cel używania name. Kiedy używasz <a name="something"></a>, możesz odwoływać się do niego również z zewnątrz, jednak twoje rozwiązanie tego nie zapewnia.
Ramtin
8

To znacznie ułatwiło mi życie. Zasadniczo umieszczasz swój tag id elementów i przewija się do niego bez dużej ilości kodu

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

W Javascript

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

W Twoim html

<div id="scroollto1">

Tutaj jestem na samym dole strony

bobthenob
źródło
7
function scroll_to_anchor(anchor_id){
    var tag = $("#"+anchor_id+"");
    $('html,body').animate({scrollTop: tag.offset().top},'slow');
}
ipegasus
źródło
3
Prawdziwe pytanie, czy znak + „” robi coś w drugiej linii?
Rob
@Rob JavaScript nie ma interpolacji ciąg, więc korzystanie +z łańcuchami lub vars łączy je, jak: "#some_anchor". anchor_id + ""Myślę, że naprawdę, drugie konkatowanie nie jest potrzebne.
onebree
Dzięki @onebree To był drugi concat, nad którym się zastanawiałem :)
Rob
5

Należy również wziąć pod uwagę, że cel ma dopełnienie i dlatego użyj positionzamiast offset. Możesz również uwzględnić potencjalny pasek nawigacyjny, na który nie chcesz nakładać celu.

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
źródło
IMHO to najlepsze rozwiązanie, ponieważ nie wymaga dodatkowych zajęć i irytującej matematyki wypełnienia w CSS dla stałych pasków nawigacyjnych
KSPR
Ale to nie powoduje przepisania tagu kotwicy w adresie URL. Dodaj, history.pushState({}, "", this.href);aby aktualizować adres URL
KSPR
3

Moje podejście z jQuery polega na tym, że wszystkie osadzone linki kotwicy po prostu przesuwają się zamiast natychmiastowo przeskakiwać

Jest bardzo podobny do odpowiedzi Santi Nunez, ale jest bardziej wiarygodny .

Wsparcie

  • Środowisko wieloramkowe.
  • Przed zakończeniem ładowania strony.
<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
źródło
1

Możesz chcieć dodać wartości offsetTop i scrollTop w przypadku, gdy animujesz nie całą stronę, ale raczej zagnieżdżoną zawartość.

np .:

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
źródło
0

SS Slow Scroll

To rozwiązanie nie wymaga znaczników kotwicy, ale oczywiście musisz dopasować przycisk menu (dowolny atrybut, na przykład „ss”) do identyfikatora elementu docelowego w Twoim html.

ss="about" zabierze cię do 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>

Skrzypce

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

Hastig Zusammenstellen
źródło
0

Oto rozwiązanie, które zadziałało dla mnie. Jest to ogólna funkcja, która działa dla wszystkich atagów odnoszących się do nazwanegoa

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

Uwaga 1: upewnij się, że "w html używasz podwójnych cudzysłowów . Jeśli używasz apostrofów, zmień powyższą część kodu navar target = $("a[name='" + name.substring(1) + "']");

Uwaga 2: W niektórych przypadkach, zwłaszcza gdy używasz paska samoprzylepnego z bootstrapu, nazwany aukryje się pod paskiem nawigacji. W takich przypadkach (lub w każdym podobnym przypadku) możesz zmniejszyć liczbę pikseli z zwoju, aby uzyskać optymalną lokalizację. Na przykład: $('html,body').animate({ scrollTop: $(target).offset().top - 15 }, 'slow');przeniesie Cię do target15 pikseli na górze.

Ramtin
źródło
0

Natknąłem się na ten przykład na https://css-tricks.com/snippets/jquery/smooth-scrolling/, wyjaśniając każdy wiersz kodu. Uważam, że to najlepsza opcja.

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

Możesz być natywny:

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

lub z 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
źródło
0

Ok, najprostsza metoda to: -

W ramach funkcji kliknięcia (Jquery): -

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

HTML

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

Przetestuj tutaj:

http://jsbin.com/ucati4

Sabi Singh
źródło
3
Prosimy nie dołączać podpisów, zwłaszcza z linkami ... a zwłaszcza z niepowiązanymi linkami. Możesz umieścić takie rzeczy w swoim profilu.
Andrew Barber,
Zadane
Czy jest sposób, w jaki mogę to wykorzystać w WordPress? Dodaje się do mojej witryny, ale tak naprawdę nie działa. Tutaj link: scentology.burnnotice.co.za
agent użytkownika
-1

następujące rozwiązanie zadziałało dla mnie:

$("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
źródło