Menghidupkan scrollTop tidak berfungsi di firefox

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

Firefox menempatkan overflow di html level, kecuali jika secara khusus ditata untuk berperilaku berbeda.

Untuk membuatnya berfungsi di Firefox, gunakan

$('body,html').animate( ... );

Contoh kerja

Solusi CSS adalah mengatur gaya berikut:

html { overflow: hidden; height: 100%; }
body { overflow: auto; height: 100%; }

Saya akan berasumsi bahwa solusi JS akan paling tidak invasif.

Memperbarui

Banyak diskusi di bawah ini berfokus pada fakta bahwa menjiwai scrollTopdua 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:

function runOnce(fn) { 
    var count = 0; 
    return function() { 
        if(++count == 1)
            fn.apply(this, arguments);
    };
};

$('body, html').animate({ scrollTop: stop }, delay, runOnce(function() {
   console.log('scroll complete');
}));

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.

$('html, body')
    .animate({ scrollTop: 100 })
    .promise()
    .then(function(){
        // callback code here
    })
});

PEMBARUAN: Inilah cara Anda dapat menggunakan deteksi fitur. Potongan kode ini perlu dievaluasi sebelum panggilan animasi Anda:

// Note that the DOM needs to be loaded first, 
// or else document.body will be undefined
function getScrollTopElement() {

    // if missing doctype (quirks mode) then will always use 'body'
    if ( document.compatMode !== 'CSS1Compat' ) return 'body';

    // if there's a doctype (and your page should)
    // most browsers will support the scrollTop property on EITHER html OR body
    // we'll have to do a quick test to detect which one...

    var html = document.documentElement;
    var body = document.body;

    // get our starting position. 
    // pageYOffset works for all browsers except IE8 and below
    var startingY = window.pageYOffset || body.scrollTop || html.scrollTop;

    // scroll the window down by 1px (scrollTo works in all browsers)
    var newY = startingY + 1;
    window.scrollTo(0, newY);

    // And check which property changed
    // FF and IE use only html. Safari uses only body.
    // Chrome has values for both, but says 
    // body.scrollTop is deprecated when in Strict mode.,
    // so let's check for html first.
    var element = ( html.scrollTop === newY ) ? 'html' : 'body';

    // now reset back to the starting position
    window.scrollTo(0, startingY);

    return element;
}

// store the element selector name in a global var -
// we'll use this as the selector for our page scrolling animation.
scrollTopElement = getScrollTopElement();

Sekarang gunakan var yang baru saja kita definisikan sebagai pemilih untuk animasi halaman bergulir, dan gunakan sintaks biasa:

$(scrollTopElement).animate({ scrollTop: 100 }, 500, function() {
    // normal callback
});

Saya menghabiskan waktu lama untuk mencari tahu mengapa kode saya tidak berfungsi -

$('body,html').animate({scrollTop: 50}, 500);

Masalahnya ada di css saya -

body { height: 100%};

Saya mengaturnya sebagai autogantinya (dan dibiarkan khawatir tentang mengapa itu diatur 100%di tempat pertama). Itu memperbaikinya bagi saya.

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:

• Cukup menjiwai keduanya bodydan html memiliki masalah ,
• menguji fitur perilaku peramban yang sebenarnya sulit dilakukan dengan benar (lihat komentar saya pada jawaban @ Stephen ),
• tetapi yang paling penting, ada sejumlah masalah kegunaan yang ingin Anda tangani untuk pengalaman pengguna yang layak.

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

function scrolear ( destino ) {
    var $window = $( window ),
        targetPosition = getScrollTargetPosition ( $( destino ), $window );

    $window.scrollTo( targetPosition, { duration: 1000 } );

    return false;
}

Waspadai ini. Saya memiliki masalah yang sama, baik dengan Firefox atau Explorer

$('body').animate({scrollTop:pos_},1500,function(){do X});

Jadi saya menggunakan seperti yang dikatakan David

$('body, html').animate({scrollTop:pos_},1500,function(){do X});

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.

Saya akan merekomendasikan tidak mengandalkan bodyatau htmlsebagai 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:

#my-scroll {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
}

(dengan asumsi display:block;dan top:0;left:0;default yang sesuai dengan tujuan Anda), lalu gunakan $('#my-scroll')untuk animasi Anda.

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.

$(document).ready(function() {
  function filterPath(string) {
    return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
  }
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');

  $('a[href*=#]').each(function() {
    var thisPath = filterPath(this.pathname) || locationPath;
    if (locationPath == thisPath
    && (location.hostname == this.hostname || !this.hostname)
    && this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.offset().top;
        $(this).click(function(event) {
          event.preventDefault();
          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
            location.hash = target;
          });
        });
      }
    }
  });

  // use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
          $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
        return el;
      } else {
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) {
          return el;
        }
      }
    }
    return [];
  }
});

Saya mengalami masalah yang sama baru-baru ini dan saya menyelesaikannya dengan melakukan ini:

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

Dan youpi !!! ini bekerja di semua browser.

dalam kasus penentuan posisi tidak benar, Anda dapat mengurangi nilai dari offset (). berhenti dengan melakukan ini

$ ('html, body'). animate ({scrollTop: $ ('. class_of_div'). offset () .top-desired_value}, 'fast'});

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 ke name="hashname-anchor", pengguliran berhasil.

Bagi saya, itu menghindari menambahkan ID pada titik animasi:

Menghindari:

 scrollTop: $('#' + id).offset().top

Mempersiapkan id sebelumnya dan melakukan ini sebagai gantinya:

 scrollTop: $(id).offset().top

Diperbaiki dalam FF. (Tambahan css tidak membuat perbedaan bagi saya)

setTimeout(function(){                               
                   $('html,body').animate({ scrollTop: top }, 400);
                 },0);

Semoga ini berhasil.