Fungsi ini berfungsi dengan baik. Ini menggulung tubuh ke offset wadah yang diinginkan
function scrolear(destino){
var stop = $(destino).offset().top;
var delay = 1000;
$('body').animate({scrollTop: stop}, delay);
return false;
}
Tetapi tidak di Firefox. Mengapa?
-EDIT-
Untuk menangani de double trigger pada jawaban yang diterima, saya sarankan menghentikan elemen sebelum animasi:
$('body,html').stop(true,true).animate({scrollTop: stop}, delay);
Jawaban:
Firefox menempatkan overflow di
html
level, kecuali jika secara khusus ditata untuk berperilaku berbeda.Untuk membuatnya berfungsi di Firefox, gunakan
Contoh kerja
Solusi CSS adalah mengatur gaya berikut:
Saya akan berasumsi bahwa solusi JS akan paling tidak invasif.
Memperbarui
Banyak diskusi di bawah ini berfokus pada fakta bahwa menjiwai
scrollTop
dua elemen akan menyebabkan panggilan balik dipanggil dua kali. Fitur pendeteksi browser telah disarankan dan kemudian tidak digunakan lagi, dan beberapa bisa dibilang agak dibuat-buat.Jika panggilan balik idempoten dan tidak memerlukan banyak daya komputasi, memecatnya dua kali mungkin bukan masalah total. Jika beberapa pemanggilan dari callback benar-benar merupakan masalah, dan jika Anda ingin menghindari deteksi fitur, mungkin lebih mudah untuk memastikan bahwa callback hanya dijalankan sekali dari dalam callback:
sumber
$(jQuery.browser.webkit ? "body": "html").animate(...);
$(jQuery.browser.mozilla ? "html" : "body").animate(...);
. Akan lebih bagus untuk tidak menggunakan pencarian sniffing, tetapi deteksi fitur. Tidak yakin bagaimana melakukan deteksi fitur pada CSSjQuery.browser
sudah usang dan hilang dari versi jQuery terbaruwindow.scroll
tidak bernyawa. Anda tentu saja dapat menggulung barang Anda sendiri dengan interval danscrollBy
. Jika Anda ingin menambahkan pelonggaran untuk itu, Anda tiba-tiba memiliki banyak kode untuk ditulis untuk aspek yang agak kecil dari produk Anda.Deteksi fitur dan kemudian menghidupkan objek tunggal yang didukung akan menyenangkan, tetapi tidak ada solusi satu baris. Sementara itu, inilah cara untuk menggunakan janji untuk melakukan satu panggilan balik per eksekusi.
PEMBARUAN: Inilah cara Anda dapat menggunakan deteksi fitur. Potongan kode ini perlu dievaluasi sebelum panggilan animasi Anda:
Sekarang gunakan var yang baru saja kita definisikan sebagai pemilih untuk animasi halaman bergulir, dan gunakan sintaks biasa:
sumber
html
dan kadang kembalibody
. Ini kode saya setelah mendeklarasikan fungsinya.var scrollTopElement; setTimeout( function() { scrollTopElement = getScrollTopElement(); console.log(scrollTopElement); }, 1000);
Terima kasih untuk ini, ini telah menyelesaikan masalah saya.html
bukanbody
seperti yang seharusnya. Ini hanya jika Anda digulir sepanjang halaman web dan Anda memuat ulang, jika tidak berhasil.Saya menghabiskan waktu lama untuk mencari tahu mengapa kode saya tidak berfungsi -
Masalahnya ada di css saya -
Saya mengaturnya sebagai
auto
gantinya (dan dibiarkan khawatir tentang mengapa itu diatur100%
di tempat pertama). Itu memperbaikinya bagi saya.sumber
Anda mungkin ingin menghindari masalah dengan menggunakan plugin - lebih khusus lagi, plugin saya :)
Serius, meskipun masalah dasar telah lama diatasi (browser yang berbeda menggunakan elemen yang berbeda untuk pengguliran jendela), ada beberapa masalah non-sepele di telepon yang dapat membuat Anda tersandung:
body
danhtml
memiliki masalah ,Saya jelas bias, tapi jQuery.scrollable sebenarnya adalah pilihan yang baik untuk mengatasi masalah ini. (Sebenarnya, saya tidak tahu ada plugin lain yang menangani semuanya.)
Selain itu, Anda dapat menghitung posisi target - salah satu yang Anda gulir ke - dengan cara peluru-bukti dengan yang
getScrollTargetPosition()
fungsi dalam inti ini .Semuanya akan meninggalkan Anda
sumber
Waspadai ini. Saya memiliki masalah yang sama, baik dengan Firefox atau Explorer
Jadi saya menggunakan seperti yang dikatakan David
Hebat itu berhasil, tetapi masalah baru, karena ada dua elemen, tubuh dan html, fungsi dieksekusi dua kali, ini adalah, lakukan X berjalan dua kali.
hanya mencoba dengan 'html', dan Firefox serta Explorer berfungsi, tetapi sekarang Chrome tidak mendukung ini.
Diperlukan tubuh untuk Chrome, dan html untuk Firefox dan Explorer. Apakah ini bug jQuery? tidak tahu
Berhati-hatilah dengan fungsi Anda, karena itu akan berjalan dua kali.
sumber
Saya akan merekomendasikan tidak mengandalkan
body
atauhtml
sebagai solusi yang lebih portabel. Cukup tambahkan div di badan yang bertujuan untuk memuat elemen yang digulir dan gaya yang diinginkannya untuk mengaktifkan scrolling ukuran penuh:(dengan asumsi
display:block;
dantop:0;left:0;
default yang sesuai dengan tujuan Anda), lalu gunakan$('#my-scroll')
untuk animasi Anda.sumber
Ini adalah real deal. Ia bekerja di Chrome dan Firefox dengan sempurna. Sungguh menyedihkan bahwa beberapa orang yang bodoh memilih saya. Kode ini benar-benar berfungsi dengan baik seperti pada semua browser. Anda hanya perlu menambahkan tautan dan meletakkan id elemen yang ingin Anda gulir di href dan itu berfungsi tanpa menentukan apa pun. Kode yang dapat digunakan kembali dan andal murni.
sumber
Saya mengalami masalah yang sama baru-baru ini dan saya menyelesaikannya dengan melakukan ini:
Dan youpi !!! ini bekerja di semua browser.
dalam kasus penentuan posisi tidak benar, Anda dapat mengurangi nilai dari offset (). berhenti dengan melakukan ini
sumber
Bagi saya masalahnya adalah firefox secara otomatis melompat ke jangkar dengan nama-atribut sama dengan nama hash yang saya masukkan ke URL. Meskipun saya meletakkan .preventDefault () untuk mencegahnya. Jadi setelah mengubah atribut nama, firefox tidak secara otomatis melompat ke jangkar, tetapi melakukan animasi dengan benar.
@Toni Maaf jika ini tidak bisa dimengerti. Masalahnya adalah saya mengubah hash di URL seperti www.someurl.com/#hashname. Lalu saya punya misalnya jangkar yang ingin
<a name="hashname" ...></a>
jQuery gulir ke secara otomatis. Tapi itu bukan karena ia melompat ke jangkar dengan atribut nama yang cocok di Firefox tanpa animasi gulir. Setelah saya mengubah atribut nama menjadi sesuatu yang berbeda dari nama hash, misalnya kename="hashname-anchor"
, pengguliran berhasil.sumber
Bagi saya, itu menghindari menambahkan ID pada titik animasi:
Menghindari:
Mempersiapkan id sebelumnya dan melakukan ini sebagai gantinya:
Diperbaiki dalam FF. (Tambahan css tidak membuat perbedaan bagi saya)
sumber
Semoga ini berhasil.
sumber