Pytanie jQuery przewiń do elementu


Mam to input element:

<input type="text" class="textfield" value="" id="subject" name="subject">

Następnie mam kilka innych elementów, takich jak inne wejścia tekstowe, obszary tekstowe itp.

Kiedy użytkownik kliknie w to input z #subject, strona powinna przewinąć do ostatniego elementu strony z ładną animacją. Powinien to być zwój do dołu, a nie do góry.

Ostatnim elementem strony jest submit przycisk z #submit:

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

Animacja nie powinna być zbyt szybka i powinna być płynna.

Używam najnowszej wersji jQuery. Wolę nie instalować żadnej wtyczki, ale używać domyślnych funkcji jQuery, aby to osiągnąć.


1875
2017-07-13 09:49


pochodzenie




Odpowiedzi:


Zakładając, że masz przycisk z identyfikatorem button, spróbuj tego przykładu:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

Mam kod z artykułu Płynne przewijanie do elementu bez wtyczki jQuery. I przetestowałem to na poniższym przykładzie.

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>


3481
2017-07-13 09:52



To nie zadziała we wszystkich przypadkach. Widzieć stackoverflow.com/questions/2905867/... - Jānis Elmeris
@BarryChapman niezupełnie. Po przeszukaniu go znalazłem to, więc oba znaczniki są potrzebne, jeśli nie chcesz mieć dodatkowej logiki na typ przeglądarki. - s3m3n
Jeśli nie chcesz animacji, a zamiast tego chcesz natychmiast przejść do elementu, użyj .scrollTop(…) zamiast .animate({scrollTop: …}, …). - Rory O'Kane
Oprócz tego, że jesteś rozwiązaniem (które działa świetnie), możesz dodać pełną funkcję, która dodaje hashtag do adresu URL. W takim przypadku nie przewinie się, ponieważ scrollTo już przewinął się do właściwej pozycji, a jeśli użytkownik skopiuje adres URL, automatycznie przyciągnie do właściwego miejsca na stronie. - Sander
jeśli używasz wywołania zwrotnego do uruchomienia po zakończeniu animacji i zauważysz, że wywołanie zwrotne uruchamia się dwukrotnie z tym rozwiązaniem, spróbuj użyć "$ (" korpusu html ") .animuj (..." zamiast "$ (" html, body ") .animate (... "przecinek stworzył dwa zdarzenia animacji: jeden dla html, jeden dla ciała, naprawdę chcesz tylko dla html body Thanks @TJ Crowder stackoverflow.com/questions/8790752/... - BoatCode


  jQuery .scrollTo() Method 

jQuery .scrollTo ():  Zobacz - Demo, API, źródło

Napisałem tę lekką wtyczkę, aby ułatwić przewijanie strony / elementu. Jest elastyczny tam, gdzie możesz przekazać element docelowy lub określoną wartość. Być może to może być część następnego oficjalnego wydania jQuery, jak myślisz?


Przykłady użycia:

$('body').scrollTo('#target'); // Scroll screen to target element

$('body').scrollTo(500); // Scroll screen 500 pixels down

$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down

Opcje:

scrollTarget: Element, ciąg lub liczba wskazująca żądaną pozycję przewijania.

offsetTop: Liczba określająca dodatkowe odstępy powyżej celu przewijania.

Trwanie: Ciąg lub liczba określająca czas trwania animacji.

złagodzenie: Ciąg wskazujący, którą funkcję łagodzenia użyć do przejścia.

kompletny: Funkcja do wywołania po zakończeniu animacji.


454
2017-10-05 08:50



Demo nie działa na chrome - alex
Działa do ostatniej aktualizacji na chrome. Mam wersję, która działa, z której aktualnie korzystam na memoryboxweddings.com/photography-posts (jeśli chcesz ją wypróbować). Opublikuję aktualizację po jej naprawieniu. - Timothy Perez
@TimothyPerez: Jestem pewien, że to oznacza coś dozwolonego do komercyjnego wykorzystania? Jestem pewien, że jest wiele osób, które chciałyby po prostu użyć tego fragmentu kodu w dowolnym miejscu na swojej stronie internetowej, a to pomogłoby im w nocy lepiej się wyspać? Może coś w rodzaju licencji MIT może odpowiadać twoim potrzebom? en.wikipedia.org/wiki/MIT_License - Robert Massaioli
$ ('body') nie działało w FF, więc wypróbowałem $ ('html, body'), które działało. - kiranvj
Jeśli ktokolwiek potrzebuje tego źródła skryptu, to możesz go pobrać flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js - Arturs


Jeśli nie interesuje Cię efekt płynnego przewijania i interesuje Cię przewijanie do konkretnego elementu, nie potrzebujesz do tego funkcji jQuery. JavaScript ma twoje pokrycie:

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

Wszystko, co musisz zrobić, to: $("selector").get(0).scrollIntoView(); 

.get(0) jest używany, ponieważ chcemy odzyskać element DOM JavaScript, a nie element DOM JQuery.


271
2017-12-24 11:35



Dziękuję, możesz podać różnicę między JavaScriptem a elementem DOM JQuery. - Francisco Corrales Morales
Czy możesz również użyć $(selector)[0]? - RobW
RobW, tak, możesz po prostu użyć [0], ale get (0) chroni cię przed niezdefiniowanymi lub negatywnymi indeksami. Zobacz źródło: james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.get - corbacho
Jeśli w ogóle nie chcesz używać jQuery, po prostu użyj document.getElementById('#elementID').scrollIntoView(). Nie ma sensu ładowanie biblioteki ~ 100k tylko po to, aby wybrać element, a następnie przekonwertować go do zwykłego JavaScript. - Gavin
@Gavin Jestem pewien, że chciałeś, aby to było: document.getElementById('elementID').scrollIntoView() - Brian


Sprawdź Przewiń do podłącz. Możesz zobaczyć demo tutaj.

Mam nadzieję, że to pomoże.


42
2017-07-13 11:05



Myślę, że warto zauważyć, że wtyczka TimothyPereza jest ograniczona do osi Y, podczas gdy Ariel Flesler (powiązany w tej odpowiedzi) jest raczej zlewem kuchennym obsługującym przewijanie xi y, co może być ważne do rozważenia na przykład, gdy pojawi się modalne okno dialogowe na urządzeniach mobilnych lub zwracając uwagę na określoną część szerokiego stołu lub formularza na urządzeniu mobilnym. - Chris Moschini


jQuery(document).ready(function($) {
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash,
        $target = $(target);

    $('html, body').stop().animate( {
      'scrollTop': $target.offset().top-40
    }, 900, 'swing', function () {
      window.location.hash = target;
    } );
  } );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul role="tablist">
  <li class="active" id="p1"><a href="#pane1" role="tab">Section 1</a></li>
  <li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
  <li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>

<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>


26
2017-07-18 18:06





Za pomocą tego prostego skryptu

if($(window.location.hash).length > 0){
        $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}

Zrobiłby to w ten sposób, że jeśli w adresie URL zostanie znaleziony tag hash, scrollTo będzie animowany do identyfikatora. Jeśli nie znaleziono znacznika skrótu, zignoruj ​​skrypt.


26
2017-09-05 11:53





Rozwiązanie Steve'a i Petera działa bardzo dobrze.

Ale w niektórych przypadkach może być konieczne przekonwertowanie wartości na liczbę całkowitą. Dziwnie, zwrócona wartość z $("...").offset().top czasami wchodzi float.
Posługiwać się: parseInt($("....").offset().top)

Na przykład:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});

15
2018-02-06 15:39