Cuộn lên đầu trang bằng JavaScript?

Làm cách nào để tôi cuộn lên đầu trang bằng JavaScript? Đó là mong muốn ngay cả khi thanh cuộn ngay lập tức nhảy lên trên cùng. Tôi không tìm kiếm một cuộn trơn tru.

Nếu bạn không cần thay đổi thành hoạt hình thì bạn không cần sử dụng bất kỳ plugin đặc biệt nào - Tôi chỉ cần sử dụng phương thức JavaScript window.scrollTo gốc - chuyển vào 0,0 sẽ cuộn trang sang trên cùng bên trái ngay lập tức .

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

Thông số

• tọa độ x là pixel dọc theo trục ngang.
• tọa độ y là pixel dọc theo trục dọc.

Nếu bạn muốn cuộn trơn tru, hãy thử một cái gì đó như thế này:

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

Điều đó sẽ đưa bất kỳ <a>thẻ nào có href="#top"và làm cho nó di chuyển trơn tru lên trên cùng.

Hãy thử điều này để cuộn lên trên

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

Giải pháp tốt hơn với hình ảnh động mượt mà:

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

Tham khảo: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example

Bạn không cần jQuery để làm điều này. Một thẻ HTML tiêu chuẩn sẽ đủ ...

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

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

Tất cả những gợi ý này hoạt động tuyệt vời cho các tình huống khác nhau. Đối với những người tìm thấy trang này thông qua một tìm kiếm, người ta cũng có thể cung cấp cho này một thử. JQuery, không có trình cắm thêm, cuộn đến phần tử.

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

cuộn trơn tru, javascript thuần túy:

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

Biên tập:

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

Một cách khác để cuộn với lề trên và bên trái:

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

<script>

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

trong html

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

Thực sự kỳ lạ: Câu hỏi này đã hoạt động được 5 năm rồi và vẫn chưa có câu trả lời JavaScript vanilla nào để tạo hiệu ứng cho cuộn cuộn Vì vậy, bạn hãy vào đây:

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)

Nếu bạn thích, bạn có thể gói nó trong một hàm và gọi nó thông qua onclickthuộc tính. Kiểm tra jsfiddle này

Lưu ý: Đây là một giải pháp rất cơ bản và có thể không phải là giải pháp hiệu quả nhất. Một ví dụ rất công phu có thể được tìm thấy ở đây: https://github.com/cferdinandi/smooth-scroll

Nếu bạn muốn cuộn trơn tru, vui lòng thử điều này:

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

Một giải pháp khác là JavaScript window.scrollTo phương thức:

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

Thông số :

• x-value là pixel dọc theo trục ngang.
• giá trị y là pixel dọc theo trục dọc.

Với window.scrollTo(0, 0);rất nhanh
nên tôi đã thử ví dụ Mark Ursino, nhưng trong Chrome không có gì xảy ra
và tôi đã tìm thấy điều này

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

đã thử nghiệm cả 3 trình duyệt và nó hoạt động.
Tôi đang sử dụng bản kế hoạch chi tiết,
đây là khi khách hàng nhấp vào nút "Đặt ngay" và không chọn thời gian thuê, từ từ di chuyển lên trên cùng nơi có lịch và mở hộp thoại div trỏ đến 2 trường, sau 3 giây nó mờ dần

Một lô của người sử dụng khuyên bạn nên chọn cả html và thân thẻ cho khả năng tương thích qua trình duyệt, như vậy:

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

Điều này có thể khiến bạn vấp ngã mặc dù nếu bạn chỉ tính đến cuộc gọi lại của mình chỉ chạy một lần. Thực tế nó sẽ chạy hai lần vì bạn đã chọn hai yếu tố.

Nếu đó là một vấn đề cho bạn, bạn có thể làm một cái gì đó như thế này:

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

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

Lý do hoạt động này là trong Chrome $('html').scrollTop()trả về 0, nhưng không phải trong các trình duyệt khác như Firefox.

Nếu bạn không muốn đợi hình động hoàn thành trong trường hợp thanh cuộn đã ở trên cùng, hãy thử điều này:

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

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

    callback();
}

Người già #topcó thể làm nên chuyện

document.location.href = "#top";

Hoạt động tốt trong FF, IE và Chrome

Thử cái này

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

$(document).scrollTop(0); cũng hoạt động.

Giải pháp không phải jQuery / JavaScript thuần túy:

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

Điều này sẽ làm việc:

window.scrollTo(0, 0);

Hãy thử mã này:

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

div => Phần tử Dom nơi bạn muốn di chuyển cuộn.

thời gian => mili giây, xác định tốc độ cuộn.

Giải pháp JavaScript thuần túy:

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

Tôi viết một giải pháp hoạt hình trên Codepen

Ngoài ra, bạn có thể thử một giải pháp khác với thuộc scroll-behavior: smoothtính CSS .

html {
    scroll-behavior: smooth;
}

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

Tại sao bạn không sử dụng hàm JQuery inbuilt scrollTop:

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

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

Ngắn gọn và đơn giản!

Bạn không cần JQuery. Đơn giản là bạn có thể gọi kịch bản

window.location = '#'

khi nhấp vào nút "Chuyển đến đầu trang"

Bản demo mẫu:

output.jsbin.com/fakumo#

PS: Đừng sử dụng phương pháp này, khi bạn đang sử dụng các thư viện hiện đại như angularjs. Điều đó có thể phá vỡ hashbang URL.

Đơn giản chỉ cần sử dụng tập lệnh này để cuộn lên đầu trực tiếp.

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

Nếu bạn không muốn cuộn trơn tru, bạn có thể gian lận và dừng hoạt hình cuộn mượt mà ngay khi bạn bắt đầu ... như vậy:

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

Tôi không biết liệu nó được đề xuất / cho phép hay không, nhưng nó hoạt động :)

Khi nào bạn sẽ sử dụng cái này? Tôi không chắc chắn, nhưng có lẽ khi bạn muốn sử dụng một cú nhấp chuột để tạo hiệu ứng một điều với Jquery, nhưng làm một việc khác mà không có hoạt hình? tức là mở bảng đăng nhập quản trị viên trượt ở đầu trang và ngay lập tức nhảy lên trên cùng để xem bảng.

Động lực

Giải pháp đơn giản này hoạt động tự nhiên và thực hiện một cuộn trơn tru đến bất kỳ vị trí nào.

Nó tránh sử dụng các liên kết neo (những người có #), theo tôi, rất hữu ích nếu bạn muốn liên kết đến một phần, nhưng không thoải mái trong một số trường hợp, đặc biệt khi chỉ lên đầu có thể dẫn đến hai URL khác nhau trỏ đến cùng một vị trí ( http://www.example.org và http://www.example.org/# ).

Giải pháp

Đặt id vào thẻ bạn muốn cuộn, ví dụ như phần đầu tiên của bạn , câu trả lời cho câu hỏi này, nhưng id có thể được đặt ở mọi nơi trong trang.

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

Sau đó, là một nút bạn có thể sử dụng một liên kết, chỉ cần chỉnh sửa thuộc tính onclick với một mã như thế này.

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

Trong đó đối số document.getElementByIdlà id của thẻ bạn muốn cuộn đến sau khi nhấp.

Bạn chỉ có thể sử dụng mục tiêu từ liên kết của mình, chẳng hạn như #someid, trong đó #someid là id của div.

Hoặc, bạn có thể sử dụng bất kỳ số lượng plugin cuộn nào làm cho nó thanh lịch hơn.

http://plugins.jquery.com/project/ScrollTo là một ví dụ.

Bạn có thể thử sử dụng JS như trong Fiddle này http://jsfiddle.net/5bNmH/1/

Thêm nút "Chuyển đến đầu trang" trong phần chân trang của bạn:

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

Không có câu trả lời nào ở trên sẽ hoạt động trong SharePoint 2016.

Nó phải được thực hiện như thế này: /sharepoint/195870/

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