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

developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Christophe Roussy

scrollTodinonaktifkan untuk saya karena plugin chrome, tidak yakin yang mana.

Jacksonkr

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

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

sumber

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

4

Ini adalah jawaban Atharva dari: https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView . Hanya ingin menambahkan jika dokumen Anda ada dalam iframe, Anda dapat memilih elemen di bingkai induk untuk menggulir ke tampilan:

 $('#element-in-parent-frame', window.parent.document).get(0).scrollIntoView();

cynya
sumber

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

sumber

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

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>

Luaskan cuplikan

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

jQuery gulir ke elemen

Jawaban: