jQuery gulir ke elemen

2328

Saya memiliki inputelemen ini :

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

Lalu saya punya beberapa elemen lain, seperti input teks lain, textareas, dll.

Ketika pengguna mengklik itu inputdengan #subject, halaman harus gulir ke elemen halaman terakhir dengan animasi yang bagus. Ini harus berupa gulir ke bawah dan bukan ke atas.

Item terakhir dari halaman adalah submittombol dengan #submit:

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

Animasi tidak boleh terlalu cepat dan harus lancar.

Saya menjalankan versi jQuery terbaru. Saya lebih suka tidak menginstal plugin apa pun selain menggunakan fitur jQuery default untuk mencapai ini.

javascript  jquery  scroll 
— DiegoP.
sumber
3
— Christophe Roussy
scrollTodinonaktifkan untuk saya karena plugin chrome, tidak yakin yang mana.
— Jacksonkr

Jawaban:

4025

Dengan asumsi Anda memiliki tombol dengan id button, coba contoh ini:

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

Saya mendapat kode dari artikel Gulir dengan lancar ke suatu elemen tanpa plugin jQuery . Dan saya sudah mengujinya pada contoh di bawah ini.

<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>
Luaskan cuplikan

— Steve
sumber
24
Ini tidak akan berfungsi dalam semua kasus. Lihat stackoverflow.com/questions/2905867/…
— Jānis Elmeris
7
@BarryChapman tidak tepat. Setelah googling saya menemukan ini , jadi kedua tag diperlukan jika Anda tidak ingin memiliki logika tambahan per jenis browser.
— s3m3n
73
Jika Anda tidak ingin animasi, dan alih-alih ingin langsung beralih ke elemen, gunakan .scrollTop(…)alih-alih .animate({scrollTop: …}, …).
— Rory O'Kane
11
Selain solusi Anda (yang berfungsi sangat baik), Anda dapat menambahkan fungsi lengkap yang menambahkan tagar ke url. Dalam hal ini, ia tidak akan menggulir, karena scrollTo sudah digulir ke posisi yang tepat, dan jika pengguna menyalin URL itu akan secara otomatis beralih ke tempat yang tepat di halaman.
— Sander
10
jika Anda menggunakan panggilan balik untuk menjalankan ketika animasi selesai dan perhatikan panggilan balik dua kali dengan solusi ini, coba gunakan "$ ('html body'). animate (..." alih-alih "$ ('html, body') .animate (... "koma menciptakan dua acara bernyawa. satu untuk html, satu untuk tubuh. Anda benar-benar hanya ingin satu untuk tubuh html Terima kasih @TJ Crowder stackoverflow.com/questions/8790752/…
— BoatCode
526

Metode jQuery .scrollTo ()

jQuery .scrollTo (): Lihat - Demo, API, Sumber

Saya menulis plugin yang ringan ini untuk membuat pengguliran halaman / elemen lebih mudah. Ini fleksibel di mana Anda bisa meneruskan elemen target atau nilai yang ditentukan. Mungkin ini bisa menjadi bagian dari rilis resmi jQuery berikutnya, bagaimana menurut Anda?

Contoh Penggunaan:

$('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

Pilihan:

scrollTarget : Elemen, string, atau angka yang menunjukkan posisi gulir yang diinginkan.

offsetTop : Angka yang menentukan jarak tambahan di atas target gulir.

Durasi : String atau angka yang menentukan berapa lama animasi akan berjalan.

pelonggaran : Sebuah string yang menunjukkan fungsi pelonggaran mana yang akan digunakan untuk transisi.

selesai : Suatu fungsi untuk memanggil setelah animasi selesai.

— Timothy Perez
sumber
2
Itu berfungsi sampai pembaruan terbaru di chrome. Saya memiliki versi yang berfungsi yang saat ini saya gunakan di memoryboxweddings.com/photography-posts (jika Anda ingin mencobanya). Saya akan memposting pembaruan setelah diperbaiki.
— Timothy Perez
Memperbaiki, ternyata itu sebenarnya file JS dari jquery.com yang membunuhnya. Harus bekerja sekarang jika Anda mencobanya.
— Timothy Perez
4
@TimothyPerez: Saya yakin itu berarti sesuatu yang permisif untuk penggunaan komersial? Saya yakin ada banyak orang yang hanya ingin menggunakan potongan kode di mana saja di situs web mereka dan itu akan membantu mereka tidur sedikit lebih mudah di malam hari? Mungkin sesuatu seperti lisensi MIT mungkin sesuai dengan kebutuhan Anda? en.wikipedia.org/wiki/MIT_License
— Robert Massaioli
13
$ ('body') tidak berfungsi di FF, jadi coba $ ('html, body') yang berfungsi.
— kiranvj
5
Jika ada yang perlu sumber itu script ini, maka di sini Anda bisa mendapatkannya flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js
— Arturs
370

Jika Anda tidak terlalu tertarik dengan efek gulir halus dan hanya tertarik untuk menggulir ke elemen tertentu, Anda tidak memerlukan beberapa fungsi jQuery untuk ini. Javascript telah mencakup kasus Anda:

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

Jadi yang perlu Anda lakukan adalah: $("selector").get(0).scrollIntoView();

.get(0) digunakan karena kami ingin mengambil elemen DOM JavaScript dan bukan elemen DOM JQuery.

— Atharva
sumber
12
Bisakah Anda juga menggunakan $(selector)[0]?
— RobW
16
RobW, ya Anda bisa menggunakan [0], tetapi dapatkan (0) melindungi Anda terhadap indeks yang tidak ditentukan atau negatif. Lihat sumber: james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.get
— corbacho
21
Jika Anda tidak ingin menggunakan jQuery sama sekali, gunakan saja document.getElementById('#elementID').scrollIntoView(). Tidak ada gunanya memuat perpustakaan ~ 100k hanya untuk memilih elemen dan kemudian mengubahnya menjadi JavaScript biasa.
— Gavin
62
@ Gavin Saya yakin Anda bermaksud untuk menjadi:document.getElementById('elementID').scrollIntoView()
— Brian
3
Keren. Tetapi sebelum menggunakan, pastikan browser mendukung ini. Sesuai Mozilla "Ini adalah teknologi eksperimental"
— Tejasvi Hegde
48

Menggunakan skrip sederhana ini

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

Akan membuat semacam itu jika tag hash ditemukan di url, scrollTo menghidupkan dengan ID. Jika tag hash tidak ditemukan, abaikan script.

— Warface
sumber
$(window.location.hash)tidak akan bekerja untuk hash yang gagal memenuhi deteksi regex id jQuery. Misalnya, hash yang berisi angka. Ini juga agak berbahaya; format input harus divalidasi sehingga Anda tidak memilih elemen yang berbeda.
— 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>
Luaskan cuplikan

— davidcondrey
sumber
1
Untuk membuatnya lebih universal dan untuk menghapus penempatan hashtag yang tidak perlu ke dalam jendela tautan browser, saya hanya mengubah kode seperti di bawah ini: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

Solusi oleh Steve dan Peter bekerja sangat baik.

Tetapi dalam beberapa kasus, Anda mungkin harus mengubah nilai menjadi bilangan bulat. Anehnya, nilai yang dikembalikan dari $("...").offset().topkadang-kadang dalam float.
Menggunakan:parseInt($("....").offset().top)

Sebagai contoh:

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

Versi ringkas dari solusi "animate".

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

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

Penggunaan dasar: $('#your_element').scrollTo();

— Cadz Rezgar
sumber
22

Inilah cara saya melakukannya.

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

Bekerja di browser apa saja.

Dapat dengan mudah dibungkus menjadi suatu fungsi

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

Berikut ini contoh kerjanya 

$(".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>
Luaskan cuplikan

Documents

— Edvard Åkerberg
sumber
6
Cukup pendek dan manis. Satu hal yang perlu diperhatikan - saya pikir ini hanya menggulir ke tampilan (bisa di bagian bawah viewport) daripada menggulirnya ke bagian atas viewport, seperti pengaturan scrollTop.
— OG Sean
20

Saya tahu cara tanpa jQuery:

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

Sunting: Sudah dua tahun dan saya masih mendapatkan reputasi secara acak dari postingan ini lmao

— GameMaster1928
sumber
18

Jika Anda hanya menangani pengguliran ke elemen input, Anda dapat menggunakannya focus(). Misalnya, jika Anda ingin menggulir ke input yang terlihat pertama:

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

Atau input yang terlihat pertama dalam wadah dengan kelas .error:

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

Terima kasih kepada Tricia Ball karena menunjukkan ini!

— Benjamin Oakes
sumber
17

Dengan solusi ini Anda tidak memerlukan plugin apa pun dan tidak diperlukan pengaturan selain menempatkan script sebelum </body>tag penutup Anda .

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

Saat dimuat, jika ada hash di alamat, kami gulir ke sana.

Dan - setiap kali Anda mengklik atautan dengan hrefhash misalnya #top, kami gulir ke sana.

— Jonathan
sumber
Ini mungkin seharusnya > 1bukan 0, hanya karena /#menyebabkan skrip ini rusak
— Tallboy
Anda seharusnya tidak secara teknis berakhir dengan URL hash kosong kecuali tautannya dibangun dengan buruk tetapi TY. (walaupun versi saya sendiri dari kode ini sudah termasuk tambalan ini ^^)
— Jonathan
Ada jitter yang terkait dengan kode ini, namun mudah diperbaiki. Anda harus return false;di akhir acara klik untuk mencegah tindakan default - segera menggulir ke jangkar - agar tidak terjadi.
— roncli
2
@roncli poin bagus - atau Anda bisa melakukannyae.preventDefault();
— Jonathan
e.preventDefault()namun tidak memperbarui hash di url saat mengklik, selalu url tanpa hash
— jayasurya_j
8

Dalam kebanyakan kasus, akan lebih baik menggunakan plugin. Serius. Aku akan menggembar - gemborkan milikku di sini . Tentu saja ada yang lain juga. Tapi tolong periksa apakah mereka benar-benar menghindari jebakan yang Anda ingin plugin di tempat pertama - tidak semuanya melakukannya.

Saya telah menulis tentang alasan menggunakan plugin di tempat lain . Singkatnya, liner yang menopang sebagian besar jawaban di sini

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

adalah UX yang buruk.

  • Animasi tidak menanggapi tindakan pengguna. Itu berjalan bahkan jika pengguna mengklik, mengetuk, atau mencoba untuk menggulir.

  • Jika titik awal animasi dekat dengan elemen target, animasi itu lambat sekali.

  • Jika elemen target ditempatkan di dekat bagian bawah halaman, itu tidak dapat digulir ke bagian atas jendela. Animasi gulir berhenti tiba-tiba kemudian, di tengah gerakan.

Untuk menangani masalah ini (dan banyak lainnya ), Anda dapat menggunakan plugin milik saya, jQuery.scrollable . Panggilan itu kemudian menjadi

$( window ).scrollTo( targetPosition );

dan hanya itu. Tentu saja, ada lebih banyak opsi .

Berkenaan dengan posisi target, $target.offset().topmelakukan pekerjaan dalam banyak kasus. Namun perlu diketahui bahwa nilai yang dikembalikan tidak membatasi htmlelemen pada akun ( lihat demo ini ). Jika Anda ingin posisi target akurat dalam situasi apa pun, lebih baik digunakan

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

Itu bekerja bahkan jika perbatasan pada htmlelemen diatur.

— hashchange
sumber
8

Animasi:

// 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

Jika Anda ingin menggulir di dalam wadah melimpah (alih-alih $('html, body')menjawab di atas), bekerja juga dengan penentuan posisi absolut, ini adalah cara yang harus dilakukan:

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

container.animate({
  scrollTop: pos
}
— FAjir
sumber
7

Cara mudah untuk mencapai gulir halaman untuk menargetkan id id

var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);
— Irshad Khan
sumber
6

Ini adalah pendekatan saya yang mengabstraksi ID dan href, menggunakan pemilih kelas generik

$(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>
Luaskan cuplikan

— vascogaspar
sumber
6

Sangat sederhana dan mudah digunakan plugin jQuery khusus. Cukup tambahkan atribut scroll=ke elemen yang dapat diklik dan tetapkan nilainya ke pemilih yang ingin Anda gulir.

Seperti: <a scroll="#product">Click me</a>. Dapat digunakan pada elemen apa saja.

(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
sumber
4 
var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

    $parent.animate({
        scrollTop : topDiff
    }, 100);
};
— kayz1
sumber
4

$('html, body').animate(...) tidak untuk saya di iphone, browser safari chrome android.

Saya harus menargetkan elemen konten root halaman.

$ ('# cotnent'). animate (...)

Inilah yang akhirnya saya dapatkan

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

Semua konten tubuh terhubung dengan div #content

<html>
....
<body>
<div id="content">
....
</div>
</body>
</html>
— Shahdat
sumber
Anda sebaiknya tidak menggunakan sniffing agen pengguna. webaim.org/blog/user-agent-string-history
— Alex Podworny
Tambahkan kata-break: break-all; ke elemen CSS Anda yang bermasalah. Tampilan web Android / iOS jQuery.animate ({scrollTop: y}) Salah. 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

Ketika pengguna mengklik input itu dengan #subject, halaman tersebut harus menggulir ke elemen halaman terakhir dengan animasi yang bagus. Ini harus berupa gulir ke bawah dan bukan ke atas.

Item terakhir dari halaman adalah tombol kirim dengan #submit

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

Ini pertama akan gulir ke bawah ke #submit kemudian mengembalikan kursor kembali ke input yang diklik, yang meniru gulir ke bawah, dan bekerja pada sebagian besar browser. Ini juga tidak memerlukan jQuery karena dapat ditulis dalam JavaScript murni.

Bisakah mode ini menggunakan focusfungsi meniru animasi dengan cara yang lebih baik, melalui chaining focuscalls. Saya belum menguji teori ini, tetapi akan terlihat seperti ini:

<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
sumber
3

Saya mengatur elemen gulir modul npm install scroll-element. Ini berfungsi seperti ini:

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)

Ditulis dengan bantuan dari posting SO berikut:

Ini kodenya:

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
sumber
2

Untuk menampilkan elemen lengkap (jika memungkinkan dengan ukuran jendela saat ini):

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
sumber
2

Saya menulis fungsi tujuan umum yang bergulir ke objek jQuery, pemilih CSS, atau nilai numerik.

Contoh penggunaan:

// 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");

Kode fungsi:

/**
* 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
sumber
2

Untuk apa nilainya, ini adalah bagaimana saya berhasil mencapai perilaku seperti itu untuk elemen umum yang dapat berada di dalam DIV dengan menggulir. Dalam kasus kami, kami tidak menggulir seluruh tubuh, tetapi hanya elemen tertentu dengan overflow: otomatis; dalam tata letak yang lebih besar.

Ini menciptakan input palsu dari ketinggian elemen target, dan kemudian menempatkan fokus padanya, dan browser akan mengurus sisanya tidak peduli seberapa dalam dalam hierarki yang dapat digulir Anda. Bekerja seperti pesona.

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
sumber
2

Ini bekerja untuk saya:

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);
— Polaris
sumber
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>
Luaskan cuplikan

— Minguocode
sumber
2

ONELINER

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

Tampilkan cuplikan kode

— Kamil Kiełczewski
sumber
1
ini bekerja dengan sempurna!
— jjoselon
1

Jawaban yang diperbarui pada 2019:

$('body').animate({
    scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');
— stardust4891
sumber
Anda harus selektor ini untuk tubuh: [document.documentElement, document.body] DAN Tidak perlu offset tubuh dalam persamaan. $ ('# subject'). offset (). top sudah cukup.
— ali6p
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.