Bagaimana cara menggulir ke atas halaman dengan JavaScript / jQuery?

Apakah ada cara untuk mengontrol pengguliran browser dengan JavaScript / jQuery?

Ketika saya menggulir halaman saya setengah jalan ke bawah, kemudian memicu memuat ulang, saya ingin halaman untuk pergi ke atas, tetapi sebaliknya mencoba untuk menemukan posisi gulir terakhir. Jadi saya melakukan ini:

$('document').ready(function() {
   $(window).scrollTop(0);
});

Tapi tidak berhasil.

EDIT :

Jadi kedua jawaban Anda berfungsi ketika saya memanggil mereka setelah halaman dimuat-Terima kasih. Namun, jika saya hanya melakukan refresh pada halaman, sepertinya browser menghitung dan menggulir ke posisi gulir yang lama SETELAH .readyacara (saya juga menguji fungsi body onload ()).

Jadi tindak lanjutnya adalah, adakah cara untuk MENCEGAH browser menggulir ke posisi sebelumnya, atau untuk menggulir ulang ke atas SETELAH ia melakukan hal itu?

Wow, saya terlambat 9 tahun untuk pertanyaan ini. Ini dia:

Tambahkan kode ini ke beban Anda.

// This prevents the page from scrolling down to where it was previously.
if ('scrollRestoration' in history) {
    history.scrollRestoration = 'manual';
}
// This is needed if the user scrolls down during page load and you want to make sure the page is scrolled to the top once it's fully loaded. This has Cross-browser support.
window.scrollTo(0,0);

history.scrollRestorasi dukungan Browser:

Chrome: didukung (sejak 46)

Firefox: didukung (sejak 46)

IE / Edge: tidak didukung (Belum ..)

Opera: didukung (sejak 33)

Safari: didukung

Untuk IE / Edge jika Anda ingin menggulir ulang ke atas SETELAH itu otomatis turun maka ini bekerja untuk saya:

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
var isEdge = /Edge/.test(navigator.userAgent);
if(isIE11 || isEdge) {
    setTimeout(function(){ window.scrollTo(0, 0); }, 300);  // adjust time according to your page. The better solution would be to possibly tie into some event and trigger once the autoscrolling goes to the top.
} 

Solusi lintas-browser, murni JavaScript:

document.body.scrollTop = document.documentElement.scrollTop = 0;

Anda hampir mendapatkannya - Anda perlu mengatur scrollToptentang body, tidak window:

$(function() {
   $('body').scrollTop(0);
});

EDIT:

Mungkin Anda dapat menambahkan jangkar kosong ke bagian atas halaman:

$(function() {
   $('<a name="top"/>').insertBefore($('body').children().eq(0));
   window.location.hash = 'top';
});

Apakah ada cara untuk MENCEGAH browser menggulir ke posisi sebelumnya, atau menggulir ulang ke atas SETELAH itu melakukan hal itu?

Solusi jquery berikut ini berfungsi untuk saya:

$(window).unload(function() {
    $('body').scrollTop(0);
});

Berikut ini adalah versi gulir animasi JavaScript murni untuk no-jQuery'ers: D

var stepTime = 20;
var docBody = document.body;
var focElem = document.documentElement;

var scrollAnimationStep = function (initPos, stepAmount) {
    var newPos = initPos - stepAmount > 0 ? initPos - stepAmount : 0;

    docBody.scrollTop = focElem.scrollTop = newPos;

    newPos && setTimeout(function () {
        scrollAnimationStep(newPos, stepAmount);
    }, stepTime);
}

var scrollTopAnimated = function (speed) {
    var topOffset = docBody.scrollTop || focElem.scrollTop;
    var stepAmount = topOffset;

    speed && (stepAmount = (topOffset * stepTime)/speed);

    scrollAnimationStep(topOffset, stepAmount);
};

Lalu:

<button onclick="scrollTopAnimated(1000)">Scroll Top</button>

MEMPERBARUI

Pergi ke atas halaman dengan efek gulir sedikit lebih mudah di javascript sekarang dengan:

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

window.scroll({
 top: 0, 
 left: 0, 
 behavior: 'smooth' 
});

PERINGATAN

Kami telah menggunakan ini dalam proyek kami yang lebih baru, tetapi saya baru saja memeriksa dokumen mozilla sekarang sambil memperbarui jawaban saya dan saya yakin itu telah diperbarui. Sekarang metode ini window.scroll(x-coord, y-coord)dan tidak menyebutkan atau menunjukkan contoh yang menggunakan objectparameter di mana Anda dapat mengatur behavioruntuk smooth. Saya baru saja mencoba kode dan masih berfungsi di chrome dan firefox dan parameter objek masih dalam spesifikasi .

Jadi gunakan ini dengan hati-hati atau Anda dapat menggunakan Polyfill ini . Selain bergulir ke atas, polyfill ini juga menangani metode lain: window.scrollBy, element.scrollIntoView, dll

JAWABAN TUA

Ini adalah javascriptimplementasi vanilla kami . Ini memiliki efek pelonggaran sederhana sehingga pengguna tidak terkejut setelah mengklik tombol Atas .

Sangat kecil dan semakin kecil saat diperkecil. Pengembang mencari alternatif untuk metode jquery tetapi ingin hasil yang sama dapat mencoba ini.

JS

document.querySelector("#to-top").addEventListener("click", function(){

    var toTopInterval = setInterval(function(){

        var supportedScrollTop = document.body.scrollTop > 0 ? document.body : document.documentElement;

        if (supportedScrollTop.scrollTop > 0) {
            supportedScrollTop.scrollTop = supportedScrollTop.scrollTop - 50;
        }

        if (supportedScrollTop.scrollTop < 1) {
            clearInterval(toTopInterval);
        }

    }, 10);

},false);

HTML

<button id="to-top">To Top</button>

Bersulang!

Ini bekerja untuk saya:

window.onload = function() {
    // short timeout
    setTimeout(function() {
        $(document.body).scrollTop(0);
    }, 15);
};

Gunakan short setTimeoutdi dalam onloaduntuk memberi browser kesempatan untuk melakukan gulir.

Anda dapat menggunakannya dengan jQuery

jQuery(window).load(function(){

    jQuery("html,body").animate({scrollTop: 100}, 1000);

});

Gunakan fungsi berikut

window.scrollTo(xpos, ypos)

Di sini xpos Diperlukan. Koordinat untuk menggulir ke, di sepanjang sumbu x (horizontal), dalam piksel

ypos juga diperlukan. Koordinat untuk menggulir ke, sepanjang sumbu-y (vertikal), dalam piksel

$(function() {
    // the element inside of which we want to scroll
        var $elem = $('#content');

        // show the buttons
    $('#nav_up').fadeIn('slow');
    $('#nav_down').fadeIn('slow');  

        // whenever we scroll fade out both buttons
    $(window).bind('scrollstart', function(){
        $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
    });
        // ... and whenever we stop scrolling fade in both buttons
    $(window).bind('scrollstop', function(){
        $('#nav_up,#nav_down').stop().animate({'opacity':'1'});
    });

        // clicking the "down" button will make the page scroll to the $elem's height
    $('#nav_down').click(
        function (e) {
            $('html, body').animate({scrollTop: $elem.height()}, 800);
        }
    );
        // clicking the "up" button will make the page scroll to the top of the page
    $('#nav_up').click(
        function (e) {
            $('html, body').animate({scrollTop: '0px'}, 800);
        }
    );
 });

Gunakan ini

Kode berikut berfungsi di Firefox, Chrome dan Safari , tetapi saya tidak dapat menguji ini di Internet Explorer. Adakah yang bisa mengujinya, lalu mengedit jawaban atau komentar saya?

$(document).scrollTop(0);

Solusi Javascript murni (animasi) saya:

function gototop() {
    if (window.scrollY>0) {
        window.scrollTo(0,window.scrollY-20)
        setTimeout("gototop()",10)
    }
}

Penjelasan:

window.scrollY adalah variabel yang dikelola oleh browser dengan jumlah piksel dari atas yang telah digulirkan oleh jendela.

window.scrollTo(x,y) adalah fungsi yang menggulirkan jendela sejumlah piksel pada sumbu x dan sumbu y.

Dengan demikian, window.scrollTo(0,window.scrollY-20)pindahkan halaman 20 piksel ke atas.

The setTimeoutmemanggil fungsi lagi di 10 milidetik sehingga kita kemudian dapat memindahkannya 20 piksel (animasi), dan ifcek pernyataan jika kita masih perlu gulir.

Mengapa Anda tidak menggunakan elemen referensi saja di awal file html Anda, seperti

<div id="top"></div>

dan kemudian, ketika halaman dimuat, lakukan saja

$(document).ready(function(){

    top.location.href = '#top';

});

Jika peramban bergulir setelah fungsi ini diaktifkan, Anda cukup melakukannya

$(window).load(function(){

    top.location.href = '#top';

});

Gulir lintas-browser ke atas:

        if($('body').scrollTop()>0){
            $('body').scrollTop(0);         //Chrome,Safari
        }else{
            if($('html').scrollTop()>0){    //IE, FF
                $('html').scrollTop(0);
            }
        } 

Gulir lintas-browser ke suatu elemen dengan id = div_id:

        if($('body').scrollTop()>$('#div_id').offset().top){
            $('body').scrollTop($('#div_id').offset().top);         //Chrome,Safari
        }else{
            if($('html').scrollTop()>$('#div_id').offset().top){    //IE, FF
                $('html').scrollTop($('#div_id').offset().top);
            }
        } 

Untuk menjawab pertanyaan yang diedit, Anda dapat mendaftarkan onscrollpawang seperti:

document.documentElement.onscroll = document.body.onscroll = function() {
    this.scrollTop = 0;
    this.onscroll = null;
}

Ini akan membuatnya sehingga upaya pertama untuk menggulir (yang kemungkinan yang otomatis dilakukan oleh browser) akan dibatalkan secara efektif.

Jika Anda dalam mode quircks (terima kasih @Niet the Dark Absol):

document.body.scrollTop = document.documentElement.scrollTop = 0;

Jika Anda dalam mode ketat:

document.documentElement.scrollTop = 0;

Tidak perlu jQuery di sini.

Ini bekerja:

jQuery(document).ready(function() {
     jQuery("html").animate({ scrollTop: 0 }, "fast");
});

Dalam kasus saya tubuh tidak berfungsi:

$('body').scrollTop(0);

Tetapi HTML berfungsi:

$('html').scrollTop(0);

Kombinasi keduanya membantu saya. Tidak ada jawaban lain yang membantu saya karena saya punya sidenav yang tidak bergulir.

 setTimeout(function () {
        window.scroll({
                        top: 0,
                        left: 0,
                        behavior: 'smooth'
                    });

    document.body.scrollTop = document.documentElement.scrollTop = 0;

}, 15);

var totop = $('#totop');
totop.click(function(){
 $('html, body').stop(true,true).animate({scrollTop:0}, 1000);
 return false;
});

$(window).scroll(function(){
 if ($(this).scrollTop() > 100){ 
  totop.fadeIn();
 }else{
  totop.fadeOut();
 }
});

<img id="totop" src="img/arrow_up.png" title="Click to go Up" style="display:none;position:fixed;bottom:10px;right:10px;cursor:pointer;cursor:hand;"/>

tanpa animasi, adil scroll(0, 0)(vanilla JS)

Jika ada yang menggunakan desain sudut dan material dengan sidenav. Ini akan mengirim Anda ke bagian atas halaman:

let ele = document.getElementsByClassName('md-sidenav-content');
    let eleArray = <Element[]>Array.prototype.slice.call(ele);
    eleArray.map( val => {
        val.scrollTop = document.documentElement.scrollTop = 0;
    });

Seeint hash harus melakukan pekerjaan. Jika Anda memiliki tajuk, Anda dapat menggunakan

window.location.href = "#headerid";

jika tidak, # saja akan berfungsi

window.location.href = "#";

Dan ketika itu ditulis ke dalam url, itu akan tetap jika Anda menyegarkan.

Faktanya, Anda tidak perlu membutuhkan JavaScript untuk itu jika Anda ingin melakukannya di acara onclick, Anda harus meletakkan tautan di sekitar elemen Anda dan memberinya # sebagai href.

Pertama-tama tambahkan tag anchor kosong ke tempat yang Anda tuju

<a href="#topAnchor"></a> 

Sekarang tambahkan fungsi di bagian header

 function GoToTop() {
            var urllocation = location.href;
            if (urllocation.indexOf("#topAnchor") > -1) {
                window.location.hash = "topAnchor";
            } else {
                return false;
            }
        }

akhirnya tambahkan acara onload ke tag tubuh

<body onload="GoToTop()">

Versi generik yang berfungsi untuk semua nilai X dan Y, dan sama dengan window.scrollUntuk api, hanya dengan penambahan scrollDuration.

* Versi generik yang cocok dengan window.scrollUntuk browser api **

function smoothScrollTo(x, y, scrollDuration) {
    x = Math.abs(x || 0);
    y = Math.abs(y || 0);
    scrollDuration = scrollDuration || 1500;

    var currentScrollY = window.scrollY,
        currentScrollX = window.scrollX,
        dirY = y > currentScrollY ? 1 : -1,
        dirX = x > currentScrollX ? 1 : -1,
        tick = 16.6667, // 1000 / 60
        scrollStep = Math.PI / ( scrollDuration / tick ),
        cosParameterY = currentScrollY / 2,
        cosParameterX = currentScrollX / 2,
        scrollCount = 0,
        scrollMargin;

    function step() {        
        scrollCount = scrollCount + 1;  

        if ( window.scrollX !== x ) {
            scrollMargin = cosParameterX + dirX * cosParameterX * Math.cos( scrollCount * scrollStep );
            window.scrollTo( 0, ( currentScrollX - scrollMargin ) );
        } 

        if ( window.scrollY !== y ) {
            scrollMargin = cosParameterY + dirY * cosParameterY * Math.cos( scrollCount * scrollStep );
            window.scrollTo( 0, ( currentScrollY - scrollMargin ) );
        } 

        if (window.scrollX !== x || window.scrollY !== y) {
            requestAnimationFrame(step);
        }
    }

    step();
}

Saya ingat melihat ini diposting di tempat lain (saya tidak dapat menemukan di mana), tetapi ini bekerja dengan sangat baik:

setTimeout(() => {
    window.scrollTo(0, 0);
}, 0);

Ini aneh, tetapi cara kerjanya didasarkan dari cara kerja antrian tumpukan JavaScript. Penjelasan lengkap dapat ditemukan di sini di bagian Zero Delays.

Gagasan dasarnya adalah bahwa waktu untuk setTimeouttidak benar-benar menentukan jumlah waktu yang ditetapkan itu akan menunggu, tetapi jumlah minimum waktu itu akan menunggu. Jadi, ketika Anda mengatakannya untuk menunggu 0ms, browser menjalankan semua proses antrian lainnya (seperti menggulir jendela ke tempat Anda terakhir) dan kemudian menjalankan panggilan balik.

 <script>
  sessionStorage.scrollDirection = 1;//create a session variable 
  var pageScroll = function() {
  window.scrollBy ({
   top: sessionStorage.scrollDirection,
   left: 0,
   behavior: 'smooth'
   });
   if($(window).scrollTop() + $(window).height() > $(document).height() - 1)
  {    
    sessionStorage.scrollDirection= Number(sessionStorage.scrollDirection )-300;
    setTimeout(pageScroll,50);//
   }
   else{
   sessionStorage.scrollDirection=Number(sessionStorage.scrollDirection )+1
   setTimeout(pageScroll,300); 
  }
};
pageScroll();
</script>