Gulir ke bagian atas halaman menggunakan JavaScript?

Bagaimana cara saya menggulir ke bagian atas halaman menggunakan JavaScript? Ini diinginkan bahkan jika scrollbar langsung melompat ke atas. Saya tidak mencari pengguliran yang mulus.

Jika Anda tidak memerlukan perubahan untuk menghidupkan maka Anda tidak perlu menggunakan plugin khusus - Saya hanya akan menggunakan jendela JavaScript asli. Metode gulung Untuk - melewatinya 0,0 akan menggulir halaman ke kiri atas secara instan .

window.scrollTo(x-coord, y-coord);

Parameter

• x-coord adalah piksel di sepanjang sumbu horizontal.
• y-coord adalah piksel di sepanjang sumbu vertikal.

Jika Anda ingin pengguliran yang mulus, coba sesuatu seperti ini:

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Itu akan mengambil setiap <a>tag yang memiliki href="#top"dan membuatnya menjadi gulir halus ke atas.

Coba ini untuk menggulir di atas

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>

Solusi yang lebih baik dengan animasi yang halus:

// this changes the scrolling behavior to "smooth"
window.scrollTo({ top: 0, behavior: 'smooth' });

Referensi: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example

Anda tidak perlu jQuery untuk melakukan ini. Tag HTML standar akan cukup ...

<div id="jump_to_me">
    blah blah blah
</div>

<a target="#jump_to_me">Click Here To Destroy The World!</a>

Semua saran ini bekerja dengan baik untuk berbagai situasi. Bagi mereka yang menemukan halaman ini melalui pencarian, kita juga bisa memberikan ini mencoba. JQuery, tanpa plug-in, gulir ke elemen.

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);

gulir halus, javascript murni:

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();

<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>

Edit:

$('html, body').animate({scrollTop:(scroll_pos)}, 2000);

Cara lain gulir dengan margin atas dan kiri:

window.scrollTo({ top: 100, left: 100, behavior: 'smooth' });

<script>

  $("a[href='#top']").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
  });
</script>

dalam html

<a href="#top">go top</a>

Sungguh aneh: Pertanyaan ini aktif selama lima tahun sekarang dan masih belum ada jawaban vanilla JavaScript untuk menghidupkan gulir ... Jadi begini:

var scrollToTop = window.setInterval(function() {
    var pos = window.pageYOffset;
    if ( pos > 0 ) {
        window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
    } else {
        window.clearInterval( scrollToTop );
    }
}, 16); // how fast to scroll (this equals roughly 60 fps)

Jika suka, Anda dapat membungkus ini dalam suatu fungsi dan menyebutnya melalui onclickatribut. Periksa jsfiddle ini

Catatan: Ini adalah solusi yang sangat mendasar dan mungkin bukan yang paling performan. Contoh yang sangat terperinci dapat ditemukan di sini: https://github.com/cferdinandi/smooth-scroll

Jika Anda ingin melakukan scrolling dengan lancar, silakan coba ini:

$("a").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
});

Solusi lain adalah metode JavaScript window.scrollTo:

 window.scrollTo(x-value, y-value);

Parameter:

• x-value adalah pixel di sepanjang sumbu horizontal.
• nilai-y adalah piksel di sepanjang sumbu vertikal.

Dengan window.scrollTo(0, 0);sangat cepat
jadi saya mencoba contoh Mark Ursino, tetapi di Chrome tidak ada yang terjadi
dan saya menemukan ini

$('.showPeriodMsgPopup').click(function(){
    //window.scrollTo(0, 0);
    $('html').animate({scrollTop:0}, 'slow');//IE, FF
    $('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
    $('.popupPeriod').fadeIn(1000, function(){
        setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
    });
});

menguji semua 3 browser dan berfungsi
saya menggunakan cetak biru css
ini adalah ketika klien mengklik tombol "Pesan sekarang" dan tidak memiliki periode sewa yang dipilih, perlahan-lahan pindah ke atas di mana kalender berada dan membuka kotak dialog yang menunjuk ke 2 bidang, setelah 3 detik memudar

Sebuah banyak dari pengguna sarankan memilih kedua html dan tubuh tag untuk kompatibilitas cross-browser, seperti:

$('html, body').animate({ scrollTop: 0 }, callback);

Ini dapat membuat Anda tersandung jika Anda mengandalkan panggilan balik Anda hanya berjalan sekali. Ini sebenarnya akan berjalan dua kali karena Anda telah memilih dua elemen.

Jika itu masalah bagi Anda, Anda dapat melakukan sesuatu seperti ini:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    $('body').animate({ scrollTop: 0 }, callback);
}

Alasan ini berfungsi adalah di Chrome $('html').scrollTop()mengembalikan 0, tetapi tidak di browser lain seperti Firefox.

Jika Anda tidak ingin menunggu sampai animasi selesai jika scrollbar sudah ada di atas, coba ini:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, callback);
        return;
    }

    callback();
}

Yang lama #topbisa melakukan trik

document.location.href = "#top";

Bekerja dengan baik di FF, IE dan Chrome

Coba ini

<script>
    $(window).scrollTop(100);
</script>

$(document).scrollTop(0); juga berfungsi.

Solusi non-jQuery / JavaScript murni:

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

Ini akan berhasil:

window.scrollTo(0, 0);

Coba kode ini:

$('html, body').animate({
    scrollTop: $("div").offset().top
}, time);

div => Dom Elemen tempat Anda ingin menggulir gulir.

waktu => milidetik, tentukan kecepatan gulir.

Solusi JavaScript murni:

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
});

Saya menulis solusi animasi di Codepen

Anda juga dapat mencoba solusi lain dengan scroll-behavior: smoothproperti CSS .

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

Mengapa Anda tidak menggunakan fungsi inbuilt JQuery scrollTop:

$('html, body').scrollTop(0);//For scrolling to top

$("body").scrollTop($("body")[0].scrollHeight);//For scrolling to bottom

Singkat dan sederhana!

Anda tidak perlu JQuery. Cukup Anda bisa memanggil skrip

window.location = '#'

pada klik tombol "Pergi ke atas"

Contoh demo:

output.jsbin.com/fakumo#

PS: Jangan gunakan pendekatan ini, ketika Anda menggunakan perpustakaan modern seperti angularjs. Itu mungkin merusak hashbang URL.

Cukup gunakan skrip ini untuk menggulir ke atas langsung.

<script>
$(document).ready(function(){
    $("button").click(function(){
        ($('body').scrollTop(0));
    });
});
</script>

Jika Anda tidak ingin pengguliran yang lancar, Anda dapat menipu dan menghentikan animasi penggulungan yang mulus segera setelah Anda memulainya ... seperti:

   $(document).ready(function() {
      $("a[href='#top']").click(function() {
          $("html, body").animate({ scrollTop: 0 }, "1");              
          $('html, body').stop(true, true);

          //Anything else you want to do in the same action goes here

          return false;                              
      });
  });

Saya tidak tahu apakah itu direkomendasikan / diizinkan, tetapi berhasil :)

Kapan Anda akan menggunakan ini? Saya tidak yakin, tapi mungkin ketika Anda ingin menggunakan satu klik untuk menghidupkan satu hal dengan Jquery, tetapi melakukan yang lain tanpa animasi? yaitu membuka panel masuk admin slide-in di bagian atas halaman, dan langsung melompat ke atas untuk melihatnya.

Motivasi

Solusi sederhana ini bekerja secara asli dan menerapkan gulir halus ke posisi apa pun.

Ini menghindari penggunaan tautan jangkar (yang dengan #) yang menurut saya berguna jika Anda ingin menautkan ke bagian, tetapi tidak begitu nyaman dalam beberapa situasi, khususnya ketika menunjuk ke atas yang dapat menyebabkan dua URL berbeda yang menunjuk ke lokasi yang sama ( http://www.example.org dan http://www.example.org/# ).

Larutan

Masukkan id ke tag yang ingin Anda gulir, misalnya bagian pertama Anda , yang menjawab pertanyaan ini, tetapi id dapat ditempatkan di mana-mana di halaman.

<body>
  <section id="top">
    <!-- your content -->
  </section>
  <div id="another"><!-- more content --></div>

Kemudian sebagai tombol Anda dapat menggunakan tautan, cukup edit atribut onclick dengan kode seperti ini.

<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>

Di mana argumen document.getElementByIdadalah id dari tag yang ingin Anda gulir setelah klik.

Anda bisa menggunakan target dari tautan Anda, seperti #someid, di mana #someid adalah id div.

Atau, Anda dapat menggunakan sejumlah plugin gulir yang membuatnya lebih elegan.

http://plugins.jquery.com/project/ScrollTo adalah contohnya.

Anda dapat mencoba menggunakan JS seperti pada Fiddle ini http://jsfiddle.net/5bNmH/1/

Tambahkan tombol "Pergi ke atas" di footer halaman Anda:

<footer>
    <hr />
    <p>Just some basic footer text.</p>
    <!-- Go to top Button -->
    <a href="#" class="go-top">Go Top</a>
</footer>

function scrolltop() {

    var offset = 220;
    var duration = 500;

    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('#back-to-top').fadeIn(duration);
        } else {
            jQuery('#back-to-top').fadeOut(duration);
        }
    });

    jQuery('#back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    });
}

Tak satu pun dari jawaban di atas akan berfungsi di SharePoint 2016.

Itu harus dilakukan seperti ini: /sharepoint/195870/

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;