jQuery przewiń do elementu

2323

Mam ten inputelement:

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

Następnie mam kilka innych elementów, takich jak inne wprowadzanie tekstu, obszary tekstowe itp.

Gdy użytkownik kliknie że inputz#subject , strona powinna przejść do ostatniego elementu strony z miłą animacji. Powinno to być przewijanie w dół, a nie w górę.

Ostatnim elementem strony jest submitprzycisk 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.

Korzystam z najnowszej wersji jQuery. Wolę nie instalować żadnych wtyczek, ale użyć domyślnych funkcji jQuery, aby to osiągnąć.

javascript  jquery  scroll 
— DiegoP.
źródło
3
— Christophe Roussy
scrollTozostał dla mnie wyłączony z powodu wtyczki chrome, nie jestem pewien który.
— Jacksonkr

Odpowiedzi:

4020

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łynnie przewijaj do elementu bez wtyczki jQuery . 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>
Rozwiń fragment kodu

— Steve
źródło
24
To nie zadziała we wszystkich przypadkach. Zobacz stackoverflow.com/questions/2905867/…
— Jānis Elmeris,
7
@BarryChapman nie do końca. Po googlowaniu znalazłem to , więc oba tagi są potrzebne, jeśli nie chcesz mieć dodatkowej logiki dla każdego typu przeglądarki.
— s3m3n
73
Jeśli nie chcesz animacji i zamiast tego chcesz od razu przejść do elementu, użyj .scrollTop(…)zamiast .animate({scrollTop: …}, …).
— Rory O'Kane,
11
Oprócz swojego rozwiązania (które działa świetnie) możesz dodać pełną funkcję, która dodaje hashtag do adresu URL. W tym przypadku nie przewinie się, ponieważ scrollTo już przewinął do właściwej pozycji, a jeśli użytkownik skopiuje adres URL, automatycznie przyciągnie do odpowiedniego miejsca na stronie.
— Sander
10
jeśli użyjesz wywołania zwrotnego do uruchomienia po zakończeniu animacji i zauważysz, że wywołanie zwrotne uruchamia się dwukrotnie w tym rozwiązaniu, spróbuj użyć „$ („ treść HTML ”). animacja (...” zamiast „$ („ HTML, treść ”) .animate (... "przecinek utworzył dwa animowane zdarzenia. jedno dla html, jedno dla body. naprawdę po prostu chcesz jedno dla html Dzięki Dzięki @TJ Crowder stackoverflow.com/questions/8790752/...
— BoatCode
526

Metoda jQuery .scrollTo ()

jQuery .scrollTo (): View - Demo, API, Source

Napisałem tę lekką wtyczkę, aby ułatwić przewijanie strony / elementu. Jest elastyczny, gdzie można przekazać element docelowy lub określoną wartość. Być może może to być część kolejnego oficjalnego wydania jQuery, co sądzisz?

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 pożądaną pozycję przewijania.

offsetTop : liczba określająca dodatkowe odstępy nad celem przewijania.

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

easing : Ciąg wskazujący, której funkcji łagodzenia należy użyć do przejścia.

complete : funkcja do wywołania po zakończeniu animacji.

— Timothy Perez
źródło
2
Działało do ostatniej aktualizacji Chrome. Mam wersję, która działa, której obecnie używam na memoryboxweddings.com/photography-posts (jeśli chcesz ją wypróbować). Opublikuję aktualizację, gdy zostanie naprawiona.
— Timothy Perez
Naprawiono, okazało się, że był to plik JS z jquery.com, który go zabijał. Powinien działać teraz, jeśli spróbujesz.
— Timothy Perez
4
@TimothyPerez: Jestem pewien, że oznacza to coś dopuszczającego do użytku komercyjnego? Jestem pewien, że jest wiele osób, które chciałyby po prostu użyć tego fragmentu kodu w dowolnym miejscu na swoich stronach internetowych i które pomogłyby im spać trochę łatwiej w nocy? Może coś takiego jak licencja MIT może odpowiadać twoim potrzebom? en.wikipedia.org/wiki/MIT_License
— Robert Massaioli
13
$ („body”) nie działało w FF, więc wypróbowałem $ („html, body”), który zadziałał.
— kiranvj
5
Jeśli ktoś potrzebuje tego skryptu, tutaj możesz go pobrać flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js
— Arturs
370

Jeśli nie interesuje Cię efekt płynnego przewijania i po prostu chcesz przewinąć do określonego elementu, nie potrzebujesz do tego żadnej funkcji jQuery. JavaScript obejmuje twoją sprawę:

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 pobrać element DOM JavaScript, a nie element DOM JQuery.

— Atharva
źródło
12
Czy możesz także użyć $(selector)[0]?
— RobW
16
RobW, tak, możesz po prostu użyć [0], ale get (0) chroni cię przed niezdefiniowanymi lub ujemnymi indeksami. Zobacz źródło: james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.get
— corbacho
21
Jeśli nie chcesz w ogóle używać jQuery, po prostu użyj document.getElementById('#elementID').scrollIntoView(). Nie trzeba ładować biblioteki ~ 100k tylko po to, aby wybrać element, a następnie przekonwertować go na zwykły JavaScript.
— Gavin
62
@Gavin Jestem pewien, że miałeś na myśli:document.getElementById('elementID').scrollIntoView()
— Brian
3
Fajne. Ale przed użyciem upewnij się, że przeglądarka to obsługuje. Według Mozilli „Jest to technologia eksperymentalna”
— Tejasvi Hegde
48

Za pomocą tego prostego skryptu

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

Sprawiłoby, że jeśli znacznik skrótu zostanie znaleziony w adresie URL, scrollTo animuje do identyfikatora. Jeśli nie znaleziono znacznika skrótu, zignoruj ​​skrypt.

— Warface
źródło
$(window.location.hash)nie będzie działać dla skrótów, które nie spełniają wykrycia wyrażenia regularnego jQuery. Na przykład skróty zawierające liczby. Jest to również trochę niebezpieczne; format wejściowy powinien zostać sprawdzony, abyś nie wybrał innego elementu.
— dchacke
35 

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>
Rozwiń fragment kodu

— Davidcondrey
źródło
1
Aby uczynić go bardziej uniwersalnym i usunąć niepotrzebne umieszczanie hashtaga w oknie linku przeglądarki, po prostu poprawiłem kod w następujący sposób:jQuery(document).ready(function($) { $(document).on( "click", 'a[href^="#"]', function( e ) { e.preventDefault(); var target = this.hash, $target = $(target); $('html, body').stop().animate({ scrollTop: $target.offset().top - 100}, 1000); }); });
— bubencode
31

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ą. O dziwo, $("...").offset().topczasami zwracana jest wartość z float.
Posługiwać się:parseInt($("....").offset().top)

Na przykład:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});
— Tejasvi Hegde
źródło
22

Kompaktowa wersja rozwiązania „animowanego”.

$.fn.scrollTo = function (speed) {
    if (typeof(speed) === 'undefined')
        speed = 1000;

    $('html, body').animate({
        scrollTop: parseInt($(this).offset().top)
    }, speed);
};

Podstawowe użycie: $('#your_element').scrollTo();

— Rezgar Cadro
źródło
21

Tak to robię.

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

Działa w dowolnej przeglądarce.

Można go łatwo zawinąć w funkcję

function scrollTo(selector) {
    document.querySelector(selector).scrollIntoView({ behavior: 'smooth' })
}

Oto działający przykład 

$(".btn").click(function() {
  document.getElementById("scrollHere").scrollIntoView( {behavior: "smooth" })
})
.btn {margin-bottom: 500px;}
.middle {display: block; margin-bottom: 500px; color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btn">Scroll down</button>

<h1 class="middle">You see?</h1>

<div id="scrollHere">Arrived at your destination</div>
Rozwiń fragment kodu

Dokumenty

— Edvard Åkerberg
źródło
6
Dość krótki i słodki. Należy zwrócić uwagę na jedną rzecz - myślę, że przewija to tylko do widoku (może znajdować się na dole okienka ekranu), a nie przewija do góry okienka ekranu, podobnie jak robi to scrollTop.
— OG Sean
20

Znam sposób bez jQuery:

document.getElementById("element-id").scrollIntoView();

Edycja: Minęły dwa lata i wciąż losowo uzyskuję reputację z tego postu lmao

— GameMaster1928
źródło
18

Jeśli używasz tylko przewijania do elementu wejściowego, możesz użyć focus(). Na przykład, jeśli chcesz przewinąć do pierwszego widocznego wejścia:

$(':input:visible').first().focus();

Lub pierwsze widoczne wejście w kontenerze z klasą .error:

$('.error :input:visible').first().focus();

Dzięki Tricia Ball za zwrócenie na to uwagi!

— Benjamin Oakes
źródło
17

Dzięki temu rozwiązaniu nie potrzebujesz żadnej wtyczki i nie musisz konfigurować oprócz umieszczenia skryptu przed </body>tagiem zamykającym .

$("a[href^='#']").on("click", function(e) {
  e.preventDefault();
  $("html, body").animate({
    scrollTop: $($(this).attr("href")).offset().top
  }, 1000);
});

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

Po załadowaniu, jeśli w adresie znajduje się skrót, przewijamy go.

I - za każdym razem, gdy klikniesz alink z hrefhashem, np. #topPrzewijamy go.

— Jonathan
źródło
Prawdopodobnie powinno to być > 1zamiast 0, tylko dlatego, że /#powoduje zerwanie tego skryptu
— Tallboy
Technicznie nie powinieneś mieć pustego skrótu URL, chyba że linki są źle skonstruowane, ale TY. (chociaż moja własna wersja tego kodu zawiera już tę łatkę ^^)
— Jonathan
Z tym kodem związane są drgania, ale można je łatwo naprawić. Musisz return false;na końcu zdarzenia „kliknięcie”, aby zapobiec domyślnemu działaniu - natychmiastowemu przewinięciu do zakotwiczenia -.
— roncli,
2
@roncli dobra uwaga - alternatywnie możesz to zrobiće.preventDefault();
— Jonathan
e.preventDefault()jednak nie aktualizuje skrótu w
— adresie
8

W większości przypadków najlepiej byłoby użyć wtyczki. Poważnie. Zamierzam tu promować moje . Oczywiście są też inne. Ale sprawdź, czy naprawdę unikają pułapek, dla których chcesz wtyczki - nie wszystkie.

Napisałem o powodach używania wtyczki w innym miejscu . W skrócie, jedna linijka stanowiąca podstawę większości odpowiedzi tutaj

$('html, body').animate( { scrollTop: $target.offset().top }, duration );

jest zły UX.

  • Animacja nie reaguje na działania użytkownika. Kontynuuje się, nawet jeśli użytkownik kliknie, stuknie lub spróbuje przewinąć.

  • Jeśli punkt początkowy animacji znajduje się blisko elementu docelowego, animacja jest boleśnie powolna.

  • Jeśli element docelowy znajduje się w dolnej części strony, nie można go przewinąć na górę okna. Animacja przewijania zatrzymuje się nagle, w ruchu.

Aby poradzić sobie z tymi problemami (i kilkoma innymi ), możesz użyć mojej wtyczki, jQuery.scrollable . Połączenie staje się wtedy

$( window ).scrollTo( targetPosition );

i to wszystko. Oczywiście jest więcej opcji .

W odniesieniu do pozycji docelowej $target.offset().topwykonuje pracę w większości przypadków. Należy jednak pamiętać, że zwrócona wartość nie uwzględnia obramowania htmlelementu ( zobacz to demo ). Jeśli potrzebujesz, aby pozycja docelowa była dokładna w jakichkolwiek okolicznościach, lepiej jest użyć

targetPosition = $( window ).scrollTop() + $target[0].getBoundingClientRect().top;

Działa to nawet po ustawieniu granicy htmlelementu.

— hashchange
źródło
8

Animacje:

// slide to top of the page
$('.up').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
    return false;
});

// slide page to anchor
$('.menutop b').click(function(){
    //event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 600);
    return false;
});

// Scroll to class, div
$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#target-element").offset().top
    }, 1000);
});

// div background animate
$(window).scroll(function () {

    var x = $(this).scrollTop();

    // freezze div background
    $('.banner0').css('background-position', '0px ' + x +'px');

    // from left to right
    $('.banner0').css('background-position', x+'px ' +'0px');

    // from right to left
    $('.banner0').css('background-position', -x+'px ' +'0px');

    // from bottom to top
    $('#skills').css('background-position', '0px ' + -x + 'px');

    // move background from top to bottom
    $('.skills1').css('background-position', '0% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 1) + 'px, center top');

    // Show hide mtop menu  
    if ( x > 100 ) {
    $( ".menu" ).addClass( 'menushow' );
    $( ".menu" ).fadeIn("slow");
    $( ".menu" ).animate({opacity: 0.75}, 500);
    } else {
    $( ".menu" ).removeClass( 'menushow' );
    $( ".menu" ).animate({opacity: 1}, 500);
    }

});

// progres bar animation simple
$('.bar1').each(function(i) {
  var width = $(this).data('width');  
  $(this).animate({'width' : width + '%' }, 900, function(){
    // Animation complete
  });  
});
8

Jeśli chcesz przewijać w kontenerze przelewu (zamiast $('html, body')odpowiedzi powyżej), działając również z pozycjonowaniem bezwzględnym, możesz to zrobić w następujący sposób:

var elem = $('#myElement'),
    container = $('#myScrollableContainer'),
    pos = elem.position().top + container.scrollTop() - container.position().top;

container.animate({
  scrollTop: pos
}
— FAjir
źródło
7

Łatwy sposób na uzyskanie przewijania strony do id div

var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);
— Irshad Khan
źródło
6

Takie jest moje podejście do wyodrębniania identyfikatorów i hrefów przy użyciu ogólnego selektora klas

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 500);
  });
});
<!-- example of a fixed nav menu -->
<ul class="nav">
  <li>
    <a href="#section-1" class="nav-item js-scroll-to">Item 1</a>
  </li>
  <li>
    <a href="#section-2" class="nav-item js-scroll-to">Item 2</a>
  </li>
  <li>
    <a href="#section-3" class="nav-item js-scroll-to">Item 3</a>
  </li>
</ul>
Rozwiń fragment kodu

— vascogaspar
źródło
6

Bardzo prosta i łatwa w użyciu niestandardowa wtyczka jQuery. Po prostu dodaj atrybutscroll= do klikalnego elementu i ustawić jego wartość na selektorze, do którego chcesz przewinąć.

Tak: <a scroll="#product">Click me</a>. Może być stosowany na dowolnym elemencie.

(function($){
    $.fn.animateScroll = function(){
        console.log($('[scroll]'));
        $('[scroll]').click(function(){
            selector = $($(this).attr('scroll'));
            console.log(selector);
            console.log(selector.offset().top);
            $('html body').animate(
                {scrollTop: (selector.offset().top)}, //- $(window).scrollTop()
                1000
            );
        });
    }
})(jQuery);

// RUN
jQuery(document).ready(function($) {
    $().animateScroll();
});

// IN HTML EXAMPLE
// RUN ONCLICK ON OBJECT WITH ATTRIBUTE SCROLL=".SELECTOR"
// <a scroll="#product">Click To Scroll</a>
— DevWL
źródło
4 
var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

    $parent.animate({
        scrollTop : topDiff
    }, 100);
};
— kayz1
źródło
4

$('html, body').animate(...) nie dotyczy mnie na iPhonie, przeglądarce Chrome Chrome Safari.

Musiałem celować w główny element treści strony.

$ („# cotnent”). animacja (...)

Oto, z czym skończyłem

if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {           
    $('#content').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
   }, 'slow');
}
else{
    $('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
    }, 'slow');
}

Wszystkie treści są połączone za pomocą div #content

<html>
....
<body>
<div id="content">
....
</div>
</body>
</html>
— Shahdat
źródło
Naprawdę nie powinieneś używać wąchania agenta użytkownika. webaim.org/blog/user-agent-string-history
— Alex Podworny
Dodaj podział na słowa: break-all; do elementu CSS, który ma kłopoty. Widok strony internetowej systemu Android / iOS jQuery.animate ({scrollTop: y}) pozycja Niepoprawnie. medium.com/@ellery.leung/…
— daliaessam
3 
$('html, body').animate({scrollTop: 
  Math.min( 
    $(to).offset().top-margintop, //margintop is the margin above the target
    $('body')[0].scrollHeight-$('body').height()) //if the target is at the bottom
}, 2000);
3

Gdy użytkownik kliknie to wejście za pomocą #subject, strona powinna przewinąć do ostatniego elementu strony z ładną animacją. Powinno to być przewijanie w dół, a nie w górę.

Ostatnim elementem strony jest przycisk przesyłania z #submit

$('#subject').click(function()
{
    $('#submit').focus();
    $('#subject').focus();
});

To najpierw przewinie w dół do #submit a następnie przywróci kursor z powrotem do klikniętego wejścia, które naśladuje przewijanie w dół i działa w większości przeglądarek. Nie wymaga również jQuery, ponieważ można go napisać w czystym JavaScript.

Czy ten sposób używania focusfunkcji lepiej naśladuje animację, poprzez focuspołączenia łańcuchowe . Nie przetestowałem tej teorii, ale wyglądałoby to tak:

<style>
  #F > *
  {
    width: 100%;
  }
</style>

<form id="F" >
  <div id="child_1"> .. </div>
  <div id="child_2"> .. </div>
  ..
  <div id="child_K"> .. </div>
</form>

<script>
  $('#child_N').click(function()
  {
    $('#child_N').focus();
    $('#child_N+1').focus();
    ..
    $('#child_K').focus();

    $('#child_N').focus();
  });
</script>
— Khaled.K
źródło
3

Ustawiłem moduł przewijania modułu npm install scroll-element. Działa to tak:

import { scrollToElement, scrollWindowToElement } from 'scroll-element'

/* scroll the window to your target element, duration and offset optional */
let targetElement = document.getElementById('my-item')
scrollWindowToElement(targetElement)

/* scroll the overflow container element to your target element, duration and offset optional */
let containerElement = document.getElementById('my-container')
let targetElement = document.getElementById('my-item')
scrollToElement(containerElement, targetElement)

Napisane z pomocą następujących postów SO:

Oto kod:

export const scrollToElement = function(containerElement, targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let targetOffsetTop = getElementOffset(targetElement).top
  let containerOffsetTop = getElementOffset(containerElement).top
  let scrollTarget = targetOffsetTop + ( containerElement.scrollTop - containerOffsetTop)
  scrollTarget += offset
  scroll(containerElement, scrollTarget, duration)
}

export const scrollWindowToElement = function(targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let scrollTarget = getElementOffset(targetElement).top
  scrollTarget += offset
  scrollWindow(scrollTarget, duration)
}

function scroll(containerElement, scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( containerElement.scrollTop < scrollTarget ) {
      containerElement.scrollTop += scrollStep
    } else {
      clearInterval(interval)
    }
  },15)
}

function scrollWindow(scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( window.scrollY < scrollTarget ) {
      window.scrollBy( 0, scrollStep )
    } else {
      clearInterval(interval)
    }
  },15)
}

function getElementOffset(element) {
  let de = document.documentElement
  let box = element.getBoundingClientRect()
  let top = box.top + window.pageYOffset - de.clientTop
  let left = box.left + window.pageXOffset - de.clientLeft
  return { top: top, left: left }
}
— svnm
źródło
2

Aby wyświetlić pełny element (jeśli jest to możliwe przy bieżącym rozmiarze okna):

var element       = $("#some_element");
var elementHeight = element.height();
var windowHeight  = $(window).height();

var offset = Math.min(elementHeight, windowHeight) + element.offset().top;
$('html, body').animate({ scrollTop: offset }, 500);
— Roman Shamritskiy
źródło
2

Napisałem funkcję ogólnego przeznaczenia, która przewija do obiektu jQuery, selektora CSS lub wartości liczbowej.

Przykładowe użycie:

// scroll to "#target-element":
$.scrollTo("#target-element");

// scroll to 80 pixels above first element with class ".invalid":
$.scrollTo(".invalid", -80);

// scroll a container with id "#my-container" to 300 pixels from its top:
$.scrollTo(300, 0, "slow", "#my-container");

Kod funkcji:

/**
* Scrolls the container to the target position minus the offset
*
* @param target    - the destination to scroll to, can be a jQuery object
*                    jQuery selector, or numeric position
* @param offset    - the offset in pixels from the target position, e.g.
*                    pass -80 to scroll to 80 pixels above the target
* @param speed     - the scroll speed in milliseconds, or one of the
*                    strings "fast" or "slow". default: 500
* @param container - a jQuery object or selector for the container to
*                    be scrolled. default: "html, body"
*/
jQuery.scrollTo = function (target, offset, speed, container) {

    if (isNaN(target)) {

        if (!(target instanceof jQuery))
            target = $(target);

        target = parseInt(target.offset().top);
    }

    container = container || "html, body";
    if (!(container instanceof jQuery))
        container = $(container);

    speed = speed || 500;
    offset = offset || 0;

    container.animate({
        scrollTop: target + offset
    }, speed);
};
— isapir
źródło
2

O ile warto, w ten sposób udało mi się osiągnąć takie zachowanie dla ogólnego elementu, który może znajdować się wewnątrz DIV z przewijaniem. W naszym przypadku nie przewijamy całego ciała, a tylko poszczególne elementy z przepełnieniem: auto; w większym układzie.

Tworzy fałszywe dane wejściowe wysokości elementu docelowego, a następnie koncentruje się na nim, a przeglądarka zajmie się resztą bez względu na to, jak głęboko znajdujesz się w przewijanej hierarchii. Działa jak marzenie.

var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

$scrollTo.prepend(inputElem);
inputElem.css({
  position: 'absolute',
  width: '1px',
  height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();
— martinh_kentico
źródło
2

To działało dla mnie:

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);
— Polaris
źródło
2 

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>
Rozwiń fragment kodu

— Minguocode
źródło
2

ONELINER

subject.onclick = e=> window.scroll({ top: submit.offsetTop, behavior: 'smooth'});

Pokaż fragment kodu

— Kamil Kiełczewski
źródło
1
działa idealnie!
— jjoselon
1

Zaktualizowana odpowiedź od 2019 r .:

$('body').animate({
    scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');
— stardust4891
źródło
Powinieneś wybrać ten selektor dla body: [document.documentElement, document.body] ORAZ Nie trzeba przesunąć ciała w równaniu. $ („# subject”). offset (). top wystarczy.
— ali6p
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.