Cuộn lên đầu trang bằng JavaScript / jQuery – jquery cuộn lên đầu trang

Cổng thông tin Khoa học Máy tính dành cho những người yêu thích máy tính. Nó bao gồm các bài báo về khoa học máy tính và lập trình được viết tốt, được tư duy tốt và được giải thích tốt, các câu đố và thực hành / lập trình cạnh tranh / các câu hỏi phỏng vấn công ty.

Bạn đang xem : jquery cuộn lên đầu

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

Có thể cuộn một trang có thể cuộn lên đầu bằng 2 cách tiếp cận:

Phương pháp 1: Sử dụng window.scrollTo ()
Phương thức scrollTo () của giao diện window có thể được sử dụng để cuộn đến một vị trí được chỉ định trên trang. Nó chấp nhận 2 tham số là tọa độ x và y của trang để cuộn đến. Chuyển cả hai tham số là 0 sẽ cuộn trang đến điểm trên cùng và ngoài cùng bên trái.

Cú pháp:

< pre> window.scrollTo (x-toạ độ, y-toạ độ)

Ví dụ:

< code class = "trơn"> & lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; head & gt;

& lt; < code class = "keyword"> ti tle & gt;

Cuộn lên đầu

trang sử dụng JavaScript / jQuery?

& lt; / title & gt;

& lt; style & gt;

. scroll {

height: 1000px;

background-color: lightgreen;

}

& lt; / style & gt;

< code class = "trơn"> & lt; / head & gt;

& lt; body & gt;

< / code> & lt; h1 style = "color: green" & gt;

GeeksforGeeks

& lt; / h1 < / code> & gt;

& lt; b & gt; Cuộn lên đầu trang

sử dụng JavaScript / jQuery? & lt; / b & gt;

& lt; p & gt; Nhấp vào nút bên dưới tới

cuộn lên đầu trang. & lt; / p & gt;

& lt; p class = " scroll " & gt; GeeksforGeeks là một

cổng thông tin khoa học máy tính. Đây là

vùng có thể cuộn lớn. & Lt; / p & gt;

& lt; nút onclick = "scrollToTop () " & gt;

< code class = "trơn"> Nhấp để cuộn lên đầu

& lt; / nút & gt;

& lt; script & gt;

function scrollToTop () {

window.scrollTo (0, 0);

}

& lt; / script & gt;

& lt; / body & gt;

& lt; / html & gt;

 
 

Đầu ra:

  • Trước khi nhấp vào nút:
    scroll-before-js
  • Sau khi nhấp vào nút:
     scroll-after-js

Phương pháp 2: Sử dụng scrollTo () trong jQuery

Trong jQuery, phương thức scrollTo () được sử dụng để set hoặc return vị trí thanh cuộn dọc cho một phần tử đã chọn. Hành vi này có thể được sử dụng để cuộn lên đầu trang bằng cách áp dụng phương pháp này trên thuộc tính window. Đặt tham số vị trí thành 0 sẽ cuộn trang lên đầu.

Cú pháp:

 $ (window) .scrollTop (position); 

Ví dụ:

& lt;! DOCTYPE html & gt; < / p>

& lt; html & gt ;

& lt; head & gt;

& lt; title & gt;

Cuộn lên đầu

< code class = "undefined space"> trang sử dụng JavaScript / jQuery?

& lt; / title & gt;

& lt; style & gt;

. scroll {

height: 1000px;

background-color: lightgreen;

}

& lt; / style & gt ;

& lt; / head & gt;

< / code>

& lt; body & gt;

& lt; h1 style = "color : green " & gt;

< code class = "trơn"> GeeksforGeeks

& lt; / h1 & gt; < / p>

& lt; b & gt;

Cuộn lên đầu trang

sử dụng JavaScript / jQuery?

& lt; / < / code> b & gt;

& lt; p & gt; < / p>

Nhấp vào nút bên dưới để

< p class = "line number28 index27 alt1"> cuộn lên đầu trang.

& lt; / p & gt;

& lt; p class = "scroll" & gt;

GeeksforGeeks là một máy tính

cổng thông tin khoa học.

Đây là một vùng lớn có thể cuộn được.

& lt; / p & gt;

< nút code class = "trơn"> & lt; onclick = "scrollToTop ()" & gt;

Nhấp để cuộn lên đầu

& lt; / nút & gt;

& lt; script src =

" https://code.jquery.com/jquery-3.3.1.min.js " & gt;

& lt; / script & gt;

& lt; < / code> script & gt;

function scrollToTop () {

< / code> $ (window) .scrollTop (0);

< / code> }

& lt; / script & gt;

& lt; / body & gt;

< / p>

& lt; / html & gt;

 
 

Đầu ra:

  • Trước khi nhấp vào nút:
    scroll-before -jq
  • Sau khi nhấp vào nút:
    scroll-after-jq
    • JavaScript tốt nhất wn để phát triển trang web nhưng nó cũng được sử dụng trong nhiều môi trường không phải trình duyệt. Bạn có thể học JavaScript từ đầu bằng cách làm theo Hướng dẫn JavaScript Ví dụ về JavaScript này .

      jQuery là một thư viện JavaScript mã nguồn mở giúp đơn giản hóa các tương tác giữa một tài liệu HTML / CSS, Nó nổi tiếng rộng rãi với triết lý “Viết ít hơn, làm nhiều hơn” . < br /> Bạn có thể học jQuery từ đầu bằng cách làm theo Hướng dẫn jQuery Ví dụ về jQuery < /span>.

      Ghi chú cá nhân của tôi


Xem thêm những thông tin liên quan đến chủ đề jquery cuộn lên đầu trang

Scroll to Top with Animation jQuery Tutorial

alt

  • Tác giả: Asif Mallik
  • Ngày đăng: 2013-10-31
  • Đánh giá: 4 ⭐ ( 1681 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this short tutorial I will teach you how to use jQuery to scroll to page Top with animation in a clean way.
    Use $("body, html") instead of $("body") for cross browser support.

    Google+: http://plus.google.com/+AsifMallik
    Twitter: http://www.twitter.com/TheAsifMallik
    Facebook: http://www.facebook.com/TheAsifMallik
    Github: http://www.github.com/asifmallik

Quay lại đầu trang trong JavaScript thuần túy

  • Tác giả: helpex.vn
  • Đánh giá: 5 ⭐ ( 3175 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một xu hướng phổ biến mà bạn thấy trên nhiều trang web là nút '' quay lại đầu trang '', nơi người dùng sẽ nhấp vào nút này để tự động cuộn trở lại đầu trang.Trong hướng dẫn trước ( Quay lại…

🥇 ▷ Cách thêm cuộn trơn tru vào hiệu ứng hàng đầu trong WordPress bằng jQuery

  • Tác giả: apsachieveonline.org
  • Đánh giá: 5 ⭐ ( 2932 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ✅ Bạn đã thấy các trang web thêm cuộn mượt mà lên đầu trang chưa? Điều này thật tuyệt khi bạn có một trang dài và muốn cung cấp cho người dùng của bạn một

JQuery cuộn lên đầu trang

  • Tác giả: vi.waldorf-am-see.org
  • Đánh giá: 3 ⭐ ( 5442 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có cách nào để cuộn lên đầu trang theo chương trình bằng jQuery không? Tôi hiện đang cố gắng thực hiện việc này với mã sau nhưng nó không hoạt động. Tôi đang sử dụng Firefox hiện tại, $ (window).

Làm cách nào để cuộn lên đầu trang với JavaScript / jQuery?

  • Tác giả: vie.cfadnc.org
  • Đánh giá: 5 ⭐ ( 5769 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có cách nào để kiểm soát việc cuộn trình duyệt bằng JavaScript / jQuery không? Khi tôi cuộn trang của mình xuống một nửa, sau đó kích hoạt tải lại, tôi muốn trang chuyển lên đầu, nhưng thay vào đó nó cố gắng tìm ...

Làm cách nào để cuộn lên đầu trang với JavaScript / jQuery?

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 1781 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Wow, tôi trễ 9 năm cho câu hỏi này. Ở đây bạn đi: Thêm mã này…

Bài 15: Bắt sự kiện cuộn trang với jQuery

  • Tác giả: goclamweb.com
  • Đánh giá: 3 ⭐ ( 6517 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này, mình sẽ hướng dẫn các bạn bắt sự kiện cuộn trang với jQuery. Chúng ta sẽ tạo hiệu ứng khi cuộn trang đến đâu, các thành phần của website sẽ biến đổi theo.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Xuất dữ liệu sang tệp CSV bằng PHP và MySQL - php lưu vào tệp csv