Mam to input element:

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

Potem mam inne elementy, jak inne wejścia tekstowe, tekstury itp.

Gdy użytkownik kliknie to input za pomocą #subject, strona powinna przewijać do ostatniego elementu strony z ładną animacją. Powinien być przewijany do dołu, a nie do góry.

Ostatni element strony to przycisk submit za pomocą #submit:

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

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

Uruchamiam najnowszą wersję jQuery. Wolę nie instalować żadnej wtyczki, ale użyj domyślnych funkcji jQuery, aby to osiągnąć.

2549
DiegoP. 13 lipiec 2011, 13:49

29 odpowiedzi

Najlepsza odpowiedź

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

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

Dostałem kod z artykułu Płynnie przewiń do elementu bez wtyczki jQuery . I przetestowałem go 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>
4176
php_nub_qq 8 lipiec 2018, 14:48

jQuery .scrollTo() Method

jQuery

Napisałem tę lekką wtyczkę, aby przewijanie strony / elementu jest znacznie łatwiejsze. Jest elastyczny, gdzie można przejść w elemencie docelowym lub określonej wartości. Być może może być częścią kolejnej oficjalnej wersji jQuery, co myślisz?


Przykłady Wykorzystanie:

$('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, łańcuch lub numer, który wskazuje żądaną pozycję przewijania.

Offsettop : Numer, który definiuje dodatkowe odstępy powyżej celu przewijania.

Czas trwania : ciąg lub liczba określająca, jak długo uruchomi się animacja.

Łatwienie : Ciąg wskazujący, że funkcja łagodząca do wykorzystania do przejścia.

kompletny : funkcja do połączenia po zakończeniu animacji.

544
Alex78191 17 maj 2017, 10:37

Jeśli nie jesteś zainteresowany gładkim efektem przewijania i po prostu interesuje się przewijaniem do konkretnego elementu, nie potrzebujesz tego funkcji jQuery. JavaScript ma Twoją obudowę:

https://developer.mozilla.org/en-us/doc/web/api/Element.scrollintoview.

Więc 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.

401
Atharva 21 styczeń 2014, 06:19

Korzystanie z tego prostego skryptu

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

Dokonałoby tak, że jeśli znacznik Hash znajduje się w adresie URL, przewijanie animować do identyfikatora. Jeśli nie znaleziono znacznika hasha, a następnie ignoruj skrypt.

55
Warface 24 listopad 2017, 04:34

Znam sposób bez jQuery:

document.getElementById("element-id").scrollIntoView();
52
object-Object 15 lipiec 2020, 04:15
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>
39
Al Foиce ѫ 16 sierpień 2016, 05:08

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

Ale w niektórych przypadkach możesz przekonwertować wartość do liczby całkowitej. Dziwnie, zwracana wartość z $("...").offset().top jest czasami w float.
Użyj: parseInt($("....").offset().top)

Na przykład:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});
33
ann 27 sierpień 2015, 06:03

To jest sposób, w jaki to robię.

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

Działa w dowolnej przeglądarce.

Można go łatwo zawinąć do funkcji

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>

Dokumenty

30
Edvard Åkerberg 20 czerwiec 2019, 13:59

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 wykorzystanie: $('#your_element').scrollTo();

22
Rezgar Cadro 22 maj 2017, 07:28

Z To rozwiązanie nie potrzebujesz wtyczki, a nie ma potrzeby nie wymagane Poza tym umieszczenie skryptu przed zamknięciem {X0}} Tag.

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

Na obciążeniu, jeśli na adres znajduje się hash, przewijamy do niego.

I - Za każdym razem, gdy klikniesz link a z href Hash E.G. #top, przewijamy do niego.

19
Jonathan 21 sierpień 2020, 15:49

Jeśli przewijasz się tylko przewijanie 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 pojemniku z klasy .error:

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

Dzięki Tricia Ball za wskazanie tego!

18
Community 23 maj 2017, 12:02

Jeśli chcesz przewijać w kontenerze przelewowym (zamiast {x0}} odpowiedział powyżej), działa również z pozycjonowaniem bezwzględnym, jest to sposób na wykonanie:

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

container.animate({
  scrollTop: pos
}
10
a11r 23 wrzesień 2017, 00:11

Łatwy sposób na osiągnięcie przewijania strony do celu Div ID

var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);
10
Irshad Khan 10 październik 2017, 13:03

W większości przypadków najlepiej byłoby użyć wtyczki. Poważnie. Idę do jQuery.scrollable . Połączenie staje się potem

$( window ).scrollTo( targetPosition );

I to wszystko. Oczywiście istnieje Więcej opcji.

W odniesieniu do pozycji docelowej, $target.offset().top ma pracę w większości przypadków. Ale pamiętaj, że zwrócona wartość nie bierze obramowania na elemencie html (Zobacz ten demo). Jeśli potrzebujesz pozycji docelowej, która ma być dokładna w żadnych okolicznościach, lepiej jest użyć

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

To działa, nawet jeśli ustawiona jest granica elementu html.

8
hashchange 17 sierpień 2015, 11:43

To jest moje podejście Abstrakcjonowanie ID i HREF, przy użyciu selektora klasy ogólnej

$(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>
6
vascogaspar 21 czerwiec 2015, 16:46

Bardzo proste i łatwe w użyciu niestandardowej wtyczki jQuery. Wystarczy dodać atrybut scroll= do elementu klikalnego i ustawić jego wartość do selektora, do którego chcesz przewinąć.

Jak: <a scroll="#product">Click me</a>. Może być używany 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>
6
CDspace 31 październik 2017, 16:32
var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

    $parent.animate({
        scrollTop : topDiff
    }, 100);
};
4
kayz1 3 lipiec 2015, 06:27

$('html, body').animate(...) nie dla mnie na iPhone, Android Chrome Safari Browser.

Musiałem ukierunkować element zawartości głównej strony.

$ ('# cotnent'). Animate (...)

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

Cała zawartość ciała przewodowa z #Content Div

<html>
....
<body>
<div id="content">
....
</div>
</body>
</html>
4
Malkev 6 luty 2017, 11:20

Jest to odpowiedź ATHARVA od: HTTPS: //developer.mozilla. ORG / EN-US / DOCS / WWW / API / ELEMENT.SCRILLINTOVIEW. Chciałem tylko dodać, jeśli dokument jest w ramce IFrame, możesz wybrać element w ramce nadrzędnej, aby przewinąć do widoku:

 $('#element-in-parent-frame', window.parent.document).get(0).scrollIntoView();
4
cynya 22 wrzesień 2018, 04:25
$('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
user669677user669677 12 luty 2014, 14:22

Gdy użytkownik kliknie na tym wejściu za pomocą #Subject, strona powinna przewinąć do ostatniego elementu strony z ładną animacją. Powinien być przewijany do dołu, a nie do góry.

Ostatni element strony jest przyciskiem Wyślij z #Submit

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

Spowoduje to przewiń w dół do #submit, a następnie przywrócić kursor z powrotem do klikniętego do wejścia, który naśladuje naśladowanie w dół i działa na większości przeglądarek. Nie wymaga także jQuery, ponieważ może być napisany w czystym javascript.

Czy ta moda może korzystać z focus Funkcja naśladującej animacji w lepszym sposobie, dzięki łańcuchu focus połączenia. Nie przetestowałem tej teorii, ale wyglądałoby coś takiego:

<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>
3
Khaled.K 28 listopad 2015, 12:34

Ustawiłem moduł Element przewijania npm install scroll-element. Działa 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 socie:

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 }
}
3
Community 23 maj 2017, 12:10

Zaktualizowana odpowiedź od 2019 r.:

$('body').animate({
    scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');
3
stardust4891 17 styczeń 2019, 19:58

oneliner

subject.onclick = e=> window.scroll({ top: submit.offsetTop, behavior: 'smooth'});
subject.onclick = e=> window.scroll({top: submit.offsetTop, behavior: 'smooth'});
.box,.foot{display: flex;background:#fdf;padding:500px 0} .foot{padding:250px}
<input type="text" class="textfield" value="click here" id="subject" name="subject">

<div class="box">
  Some content
  <textarea></textarea>
</div>

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

<div class="foot">Some footer</div>
3
Kamil Kiełczewski 20 luty 2020, 14:02

Aby pokazać pełny element (jeśli jest to możliwe dzięki aktualnego rozmiaru 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);
2
Peter Mortensen 12 lipiec 2014, 06:44

Napisałem funkcję ogólnego przeznaczenia, który przewija do obiektu jQuery, selektora CSS lub wartość numeryczną.

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);
};
2
isapir 18 listopad 2015, 19:46

Za co warto, tak 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, ale po prostu poszczególnych elementów z przepełnieniem: Auto; w większym układzie.

Tworzy fałszywe wejście wysokości elementu docelowego, a następnie stawia na nim ostrość, a przeglądarka dba o resztę bez względu na to, jak głęboko w przewijalnej hierarchii jesteś. 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();
2
martinh_kentico 26 luty 2016, 11:40

To zadziałało dla mnie:

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);
2
Polaris 7 listopad 2018, 08:51
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>
2
Minguocode 19 marzec 2019, 15:25