เลื่อนไปที่ด้านบนของหน้าโดยใช้ JavaScript?

ฉันจะเลื่อนไปที่ด้านบนของหน้าโดยใช้ JavaScript ได้อย่างไร เป็นที่พึงประสงค์แม้ว่าแถบเลื่อนจะกระโดดไปด้านบนทันที ฉันไม่ได้มองหาการเลื่อนที่ราบรื่น

หากคุณไม่ต้องการเปลี่ยนแปลงภาพเคลื่อนไหวคุณไม่จำเป็นต้องใช้ปลั๊กอินพิเศษใด ๆ - ฉันแค่ใช้ JavaScript ดั้งเดิม window.scrollTo method - การผ่าน 0,0 จะเป็นการเลื่อนหน้าไปทางซ้ายบนทันที .

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

พารามิเตอร์

• x-coord เป็นพิกเซลตามแนวแกนนอน
• y-coord เป็นพิกเซลตามแนวแกนตั้ง

หากคุณต้องการการเลื่อนที่ราบรื่นลองทำดังนี้:

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

ที่จะใช้<a>แท็กที่มีhref="#top"และทำให้เลื่อนไปด้านบนได้อย่างราบรื่น

ลองใช้วิธีนี้เพื่อเลื่อนไปด้านบน

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

ทางออกที่ดีกว่าด้วยแอนิเมชันที่ราบรื่น:

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

การอ้างอิง: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example

คุณไม่ต้องการ jQuery ในการทำเช่นนี้ แท็ก HTML มาตรฐานจะพอเพียง ...

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

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

คำแนะนำเหล่านี้ใช้ได้ดีสำหรับสถานการณ์ต่าง ๆ สำหรับผู้ที่พบหน้านี้โดยการค้นหาหนึ่งยังสามารถให้นี้ลอง JQuery ไม่มีปลั๊กอินเลื่อนไปที่องค์ประกอบ

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

เลื่อนเรียบจาวาสคริปต์บริสุทธิ์:

(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>

แก้ไข:

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

อีกวิธีหนึ่งที่เลื่อนด้วยระยะขอบด้านบนและด้านซ้าย:

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

<script>

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

ใน html

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

แปลกจริงๆ: คำถามนี้มีการใช้งานเป็นเวลาห้าปีแล้วและยังไม่มีคำตอบของวานิลลาจาวาในการเคลื่อนไหวการเลื่อน ... ดังนั้นคุณจะไปที่นี่:

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)

ถ้าคุณชอบคุณสามารถปิดสิ่งนี้ในฟังก์ชั่นและเรียกมันว่าผ่านทางonclickแอตทริบิวต์ ตรวจสอบjsfiddleนี้

หมายเหตุ: นี่เป็นวิธีแก้ปัญหาขั้นพื้นฐานและอาจไม่ใช่วิธีที่มีประสิทธิภาพมากที่สุด ตัวอย่างที่ละเอียดมากสามารถพบได้ที่นี่: https://github.com/cferdinandi/smooth-scroll

หากคุณต้องการเลื่อนแบบราบรื่นโปรดลองสิ่งนี้:

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

อีกวิธีคือ JavaScript window.scrollTo วิธีการ:

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

พารามิเตอร์:

• ค่า x คือพิกเซลตามแนวแกนนอน
• ค่า y คือพิกเซลตามแนวแกนตั้ง

ด้วยwindow.scrollTo(0, 0);ความรวดเร็ว
ดังนั้นฉันจึงลองตัวอย่าง Mark Ursino แต่ใน Chrome ไม่มีอะไรเกิดขึ้น
และฉันพบสิ่งนี้

$('.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);
    });
});

ทดสอบทั้ง 3 เบราว์เซอร์และใช้งานได้
ฉันกำลังใช้ blueprint css
นี่คือเมื่อลูกค้าคลิกปุ่ม "จองเลย" และไม่มีการเลือกระยะเวลาการเช่าค่อย ๆ เลื่อนไปด้านบนสุดที่ปฏิทินอยู่และเปิด div dialog ที่ชี้ไปที่ 2 ฟิลด์หลังจาก 3 วินาทีมันจะจางหายไป

จำนวนมาก ของ ผู้ใช้ขอแนะนำให้เลือกทั้ง HTML และร่างกายแท็กสำหรับการทำงานร่วมกันข้ามเบราว์เซอร์เช่นดังนั้น:

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

วิธีนี้จะช่วยให้คุณรู้ว่าคุณกำลังโทรกลับทำงานเพียงครั้งเดียว ในความเป็นจริงมันจะทำงานสองครั้งเพราะคุณได้เลือกสององค์ประกอบ

หากนั่นเป็นปัญหาสำหรับคุณคุณสามารถทำสิ่งนี้:

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

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

เหตุผลที่การทำงานใน Chrome $('html').scrollTop()ส่งคืน 0 แต่ไม่ใช่ในเบราว์เซอร์อื่นเช่น Firefox

หากคุณไม่ต้องการรอให้แอนิเมชั่นดำเนินการในกรณีที่แถบเลื่อนอยู่ด้านบนให้ลองทำดังนี้:

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

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

    callback();
}

คนเฒ่าคนแก่#topสามารถทำกลอุบาย

document.location.href = "#top";

ทำงานได้ดีใน FF, IE และ Chrome

ลองสิ่งนี้

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

$(document).scrollTop(0); ยังใช้งานได้

โซลูชันที่ไม่ใช่ jQuery / JavaScript บริสุทธิ์:

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

สิ่งนี้จะได้ผล:

window.scrollTo(0, 0);

ลองรหัสนี้:

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

div =>องค์ประกอบ Dom ที่คุณต้องการเลื่อนดู

เวลา =>มิลลิวินาทีกำหนดความเร็วของการเลื่อน

ทำไมคุณไม่ใช้ JQuery ฟังก์ชั่น inbuilt scrollTop:

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

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

สั้นและง่าย!

คุณไม่ต้องการ JQuery เพียงคุณเรียกสคริปต์

window.location = '#'

เมื่อคลิกปุ่ม "ไปด้านบน"

ตัวอย่างตัวอย่าง:

output.jsbin.com/fakumo#

PS: อย่าใช้วิธีการนี้เมื่อคุณใช้ห้องสมุดที่ทันสมัยเช่น angularjs นั่นอาจทำให้ URL hashbang เสียหาย

ใช้สคริปต์นี้เพื่อเลื่อนไปด้านบนโดยตรง

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

โซลูชัน JavaScript แบบเพียว:

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

ฉันเขียนโซลูชันเคลื่อนไหวบนCodepen

นอกจากนี้คุณสามารถลองโซลูชันอื่นด้วยscroll-behavior: smoothคุณสมบัติCSS

html {
    scroll-behavior: smooth;
}

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

หากคุณไม่ต้องการการเลื่อนแบบราบรื่นคุณสามารถโกงและหยุดภาพเคลื่อนไหวการเลื่อนแบบนุ่มนวลได้ในทันทีที่คุณเริ่ม ...

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

ฉันไม่รู้ว่าจะแนะนำ / อนุญาต แต่ใช้งานได้ :)

เมื่อไหร่ที่คุณจะใช้มัน ฉันไม่แน่ใจ แต่บางทีเมื่อคุณต้องการใช้คลิกเดียวเพื่อเคลื่อนไหวสิ่งหนึ่งกับ Jquery แต่ทำอีกอย่างที่ไม่มีภาพเคลื่อนไหว เช่นเปิดแผงเข้าสู่ระบบผู้ดูแลระบบแบบเลื่อนด้านบนของหน้าและข้ามไปด้านบนเพื่อดูทันที

แรงจูงใจ

โซลูชันที่เรียบง่ายนี้ทำงานได้อย่างเป็นธรรมชาติและใช้การเลื่อนอย่างราบรื่นไปยังตำแหน่งใดก็ได้

มันหลีกเลี่ยงการใช้ลิงค์เชื่อมโยง (ที่มี#) ซึ่งในความคิดของฉันมีประโยชน์ถ้าคุณต้องการเชื่อมโยงไปยังส่วน แต่ไม่สะดวกในบางสถานการณ์โดยเฉพาะเมื่อชี้ไปที่ด้านบนซึ่งอาจนำไปสู่สอง URL ที่แตกต่างกันชี้ไปที่ ตำแหน่งเดียวกัน ( http://www.example.orgและhttp://www.example.org/# )

สารละลาย

ใส่รหัสในแท็กที่คุณต้องการเลื่อนตัวอย่างเช่นส่วนแรกของคุณที่ตอบคำถามนี้ แต่สามารถวางidได้ทุกที่ในหน้า

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

จากนั้นเป็นปุ่มที่คุณสามารถใช้ลิงก์ได้เพียงแก้ไขแอตทริบิวต์onclickด้วยรหัสเช่นนี้

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

โดยที่อาร์กิวเมนต์document.getElementByIdคือidของแท็กที่คุณต้องการเลื่อนไปหลังจากคลิก

คุณสามารถใช้เป้าหมายจากลิงก์ของคุณเช่น #someid โดยที่ #someid เป็น id ของ div

หรือคุณสามารถใช้ปลั๊กอินการเลื่อนจำนวนเท่าใดก็ได้ที่ทำให้สิ่งนี้สวยงามยิ่งขึ้น

http://plugins.jquery.com/project/ScrollToเป็นตัวอย่าง

คุณสามารถลองใช้ JS ได้ใน Fiddle นี้http://jsfiddle.net/5bNmH/1/

เพิ่มปุ่ม "ไปที่ด้านบน" ในส่วนท้ายของหน้าของคุณ:

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

คำตอบข้างต้นจะไม่ทำงานใน SharePoint 2016

จะต้องทำเช่นนี้: /sharepoint/195870/

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