Jak przewinąć do określonej lokalizacji na stronie za pomocą jQuery?

133

Czy za pomocą jQuery można przewijać do określonej lokalizacji na stronie?

Czy lokalizacja, którą chcę przewinąć, musi mieć:

<a name="#123">here</a>

Czy może po prostu przejść do określonego identyfikatora DOM?

mrblah
źródło
3
tylko mała uwaga: atrybut "name" nie jest dozwolony w XHTML 1.1 Strict, zamiast tego użyj ID
Juraj Blahunka
ciekawe pytanie, nie możesz użyć współrzędnych strony do przewijania? Myślę, że powinniśmy być w stanie.
Omar Abid
Mam rozwiązanie podobne do twojego wymagania na [tutaj] [1] [1]: stackoverflow.com/questions/3432656/ ...
user1493023 Kwietnia
@mrblah czy Twój problem został rozwiązany?
Meghdad Hadidi

Odpowiedzi:

242

Wtyczka jQuery Scroll

ponieważ jest to pytanie oznaczone jquery, muszę powiedzieć, że ta biblioteka ma bardzo fajną wtyczkę do płynnego przewijania, możesz ją znaleźć tutaj: http://plugins.jquery.com/scrollTo/

Fragmenty dokumentacji:

$('div.pane').scrollTo(...);//all divs w/class pane

lub

$.scrollTo(...);//the plugin will take care of this

Niestandardowa funkcja jQuery do przewijania

możesz użyć bardzo prostego podejścia , definiując swoją niestandardową funkcję przewijania jquery

$.fn.scrollView = function () {
    return this.each(function () {
        $('html, body').animate({
            scrollTop: $(this).offset().top
        }, 1000);
    });
}

i używaj go jak:

$('#your-div').scrollView();

Przewiń do współrzędnych strony

Animuj htmli bodyelementy z atrybutami scrollToplubscrollLeft

$('html, body').animate({
    scrollTop: 0,
    scrollLeft: 300
}, 1000);

Zwykły javascript

przewijanie za pomocą window.scroll

window.scroll(horizontalOffset, verticalOffset);

podsumowując, użyj window.location.hash, aby przejść do elementu o identyfikatorze

window.location.hash = '#your-page-element';

Bezpośrednio w HTML (ulepszenia dostępności)

<a href="#your-page-element">Jump to ID</a>

<div id="your-page-element">
    will jump here
</div>
Juraj Blahunka
źródło
Dzięki @Juraj Blahunka, ale robię to bez żadnej wtyczki
Meghdad Hadidi
Link nie prowadzi mnie do ScrollTo . Czy możesz to zaktualizować?
Barna Tekse
To powinna być odpowiedź!
neelmeg
128

Tak, nawet w zwykłym JavaScript jest to całkiem proste. Dajesz elementowi identyfikator, a następnie możesz go użyć jako „zakładki”:

<div id="here">here</div>

Jeśli chcesz, aby przewijał się tam, gdy użytkownik kliknie łącze, możesz po prostu użyć wypróbowanej metody:

<a href="#here">scroll to over there</a>

Aby zrobić to programowo, użyj scrollIntoView()

document.getElementById("here").scrollIntoView()
nickf
źródło
@nickf To nie jest jeszcze obsługiwane wszędzie. caniuse.com/#search=scrollIntoView
Aditya Singh
To jest obsługiwane ( developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView ). Myślę, że nie przeczytałeś prawidłowo kaniusa. Jednak nie będzie animowany. Raczej dość gwałtowny skok, który nie zawsze jest świetny.
perry
53

Nie ma potrzeby używania żadnej wtyczki, możesz to zrobić w ten sposób:

var divPosition = $('#divId').offset();

następnie użyj tego, aby przewinąć dokument do określonego DOM:

$('html, body').animate({scrollTop: divPosition.top}, "slow");
Meghdad Hadidi
źródło
3
+1 To prawdopodobnie najlepsza odpowiedź. Niewiele kodu i nie wymaga wtyczki.
Tricky
1
Zauważ, że może być konieczne ponowne obliczenie przesunięcia przy zmianie rozmiaru okna.
Bart Burg
2
@BartBurg dobry point-- lub po prostu Przelicz tuż przed .animaterozmowy dzieje
mikermcneil
5
Uwielbiam prostą odpowiedź. Dlaczego ludzie muszą tak komplikować sprawy? Nie chcę kolejnej wtyczki.
sterfry68
1
Naprawdę najlepsza odpowiedź.
Robert Ross,
21

Oto czysta wersja javascript:

location.hash = '#123';

Przewinie się automatycznie. Pamiętaj, aby dodać przedrostek „#”.

okw
źródło
1
Używając prymitywnej metody nazwanej kotwicy, możesz mieć adres URL zawierający hash, np. Mywebsite.com/page-about/#123 Zakładki obejmują również zachowanie hash + scrollintoview.
okw
1
Byłoby wspaniale, gdybyś mógł trochę wyjaśnić
JGallardo
6

Zwykły JavaScript:

window.location = "#elementId"
Luiz Picanço
źródło
5
<div id="idVal">
    <!--div content goes here-->
</div>
...
<script type="text/javascript">
     $(document).ready(function(){
         var divLoc = $('#idVal').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
</script>

Ten przykład pokazuje, jak zlokalizować określony identyfikator div, tj. W tym przypadku „idVal”. Jeśli masz kolejne elementy div / tabele, które otworzą się na tej stronie za pośrednictwem ajax, możesz przypisać unikalne elementy div i wywołać skrypt, aby przewinął do określonej lokalizacji dla każdej zawartości elementów div.

Mam nadzieję, że to się przyda.

user2793243
źródło
4
<script type="text/javascript">
    $(document).ready(function(){
        $(".scroll-element").click(function(){
            $('html,body').animate({
                scrollTop: $('.our_companies').offset().top
            }, 1000);

            return false;
        });
    })
</script>

Yogesh Rathod
źródło
Byłoby wspaniale, gdybyś dodał komentarze do swojego kodu. W jaki sposób pomaga pytającemu rozwiązać jego pytanie?
Artemix
1

Spróbuj tego

<div id="divRegister"></div>

$(document).ready(function() {
location.hash = "divRegister";
});
Ajay-Systematix
źródło
0

Oto wariant lekkiego podejścia @ juraj-blahunka . Ta funkcja nie zakłada, że ​​kontener jest dokumentem i przewija się tylko wtedy, gdy element jest poza zasięgiem widoku. Kolejkowanie animacji jest również wyłączone, aby uniknąć niepotrzebnego przeskakiwania.

$.fn.scrollToView = function () {
    return $.each(this, function () {
        if ($(this).position().top < 0 ||
            $(this).position().top + $(this).height() > $(this).parent().height()) {
            $(this).parent().animate({
                scrollTop: $(this).parent().scrollTop() + $(this).position().top
            }, {
                duration: 300,
                queue: false
            });
        }
    });
};
Richie
źródło
Wystąpił problem z odbiciem, ale Twoja metoda nie działa
Anon
0

Korzystanie z jquery.easing.min.js, z poprawionymi błędami konsoli IE

HTML

<a class="page-scroll" href="#features">Features</a>
<section id="features" class="features-section">Features Section</section>


        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="js/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>

        <!-- Scrolling Nav JavaScript -->
        <script src="js/jquery.easing.min.js"></script>

Jquery

//jQuery to collapse the navbar on scroll, you can use this code with in external file with name scrolling-nav.js
        $(window).scroll(function () {
            if ($(".navbar").offset().top > 50) {
                $(".navbar-fixed-top").addClass("top-nav-collapse");
            } else {
                $(".navbar-fixed-top").removeClass("top-nav-collapse");
            }
        });
        //jQuery for page scrolling feature - requires jQuery Easing plugin
        $(function () {
            $('a.page-scroll').bind('click', function (event) {
                var anchor = $(this);
                if ($(anchor).length > 0) {
                    var href = $(anchor).attr('href');
                    if ($(href.substring(href.indexOf('#'))).length > 0) {
                        $('html, body').stop().animate({
                            scrollTop: $(href.substring(href.indexOf('#'))).offset().top
                        }, 1500, 'easeInOutExpo');
                    }
                    else {
                        window.location = href;
                    }
                }
                event.preventDefault();
            });
        });
Super Model
źródło
To o wiele za dużo kodu jak na tak proste zadanie. location.hash = 'idOfElement';powinno wystarczyć
Kolob Canyon