JavaScript Cuộn lên đầu – cửa sổ cuộn lên đầu

Hướng dẫn về JavaScript Cuộn lên đầu. Ở đây chúng ta thảo luận về cú pháp trong javascript Scroll to Top và ví dụ để triển khai với các mã và kết quả đầu ra.

Bạn đang xem : cuộn cửa sổ lên đầu

javascript cuộn lên đầu

Giới thiệu về JavaScript Cuộn lên đầu

Trong khi viết mã cho phía máy khách, có một tình huống xảy ra khi chúng tôi phải cuộn cửa sổ hoặc phần tử hiện tại vì chiều dài của nó vượt quá cửa sổ hiển thị. Trong những trường hợp như vậy, javascript có thể được sử dụng để thao tác và xử lý việc cuộn cửa sổ hoặc phần tử. Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách cuộn trở lại đầu cửa sổ bằng javascript. Tình trạng này thường phát sinh khi người dùng đã đi đến cuối trang và bây giờ họ muốn quay lại đầu trang. Tại đây, chúng tôi có thể cung cấp một nút khi nhấp vào đó anh ấy sẽ được đưa trở lại đầu trang hoặc cửa sổ.

Điều này cũng có thể được thực hiện trên cơ sở sơ cấp. Giả sử, Chúng tôi có một trang web một trang chứa nhiều phần trên cùng một trang như giới thiệu, tính năng, lợi ích, khách hàng hiện tại gắn bó với họ, sứ mệnh và tầm nhìn, v.v. Sau khi người dùng đến cuối trang, họ sẽ có thể điều hướng đến phần tử của phần mà anh ta muốn. Điều này có thể đạt được tương tự, bằng cách cung cấp các nút cho mỗi phần. Hãy bắt đầu với điều cơ bản đầu tiên là hàm và cú pháp của nó.

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

Window.scrollTo ()

Phương thức Window.scrollTo () được sử dụng để cuộn đến một vị trí hoặc vị trí được chỉ định với sự trợ giúp của các tọa độ x và y được đề cập dưới dạng các tham số của nó được coi là pixel và khi thực thi phương thức scrollTo (), người dùng được điều hướng đến vị trí cụ thể đó. Bây giờ, nếu chúng ta muốn cuộn lên đầu trang, thì những gì chúng ta có thể làm là chỉ cần đề cập đến tọa độ x và y của các tham số scrollTo () là 0. Điều này sẽ dẫn đến điều hướng đến điểm trên cùng và ngoài cùng bên trái của trang khi phương thức sẽ được thực thi. Theo mặc định, vị trí ban đầu là vị trí phía trên bên trái của trang.

Ngoài ra, chúng ta cũng có thể đề cập đến các tùy chọn cuộn như một tham số cho phương thức scrollTo () thể hiện vị trí và cả việc cuộn có trơn tru hay không.

Cú pháp

Dưới đây là cú pháp trong javascript Cuộn lên đầu trang:

  window.scrollTo (x-toạ độ, y-toạ độ)  
  • x-toạ độ: Nó biểu thị một pixel trên tài liệu dọc theo trục hoành là trục x mà chúng tôi muốn điều hướng hoặc cuộn đến ở vị trí phía trên bên trái.
  • tọa độ y: Nó biểu thị một pixel trên tài liệu dọc theo trục tung là trục y mà chúng tôi muốn điều hướng hoặc cuộn đến ở góc trên bên trái.
Xem Thêm  Văn bản Căn đều HTML - căn lề văn bản căn lề trong html

hoặc

  window.scrollTo (scrollOptions);  

scrollOptions: Đây là một tham số từ điển ScrollToOptions. Nó có ba thuộc tính như sau –

  1. ScrollToOptions.top: Nó biểu thị số lượng pixel mà chúng tôi muốn cuộn theo trục y, tức là theo chiều dọc.
  2. ScrollToOptions.left: Nó biểu thị số lượng pixel mà chúng tôi muốn cuộn theo trục x, tức là theo chiều ngang.
  3. ScrollToOptions.behavior: Nó thể hiện liệu hoạt ảnh cuộn có mượt mà hay không, nó sẽ điều hướng ngay lập tức đến vị trí được chỉ định.

Ví dụ về JavaScript Scroll to Top

Dưới đây là các ví dụ về cách cuộn lên đầu trang của javascript:

Ví dụ # 1

Ví dụ đơn giản về phương thức scrollTo ()

Mã:

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; phong cách & gt;
.scroll {
chiều cao: 1000px; background-color: màu hồng;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h1 style = "color: red" & gt; Bộ mã hóa Javascript là tốt nhất
& lt; / h1 & gt;
& lt; b & gt; Trình diễn thao tác cuộn lên đầu trang bằng javascript & lt; / b & gt;
& lt; p & gt; Bạn có thể nhấp vào nút được đặt ở cuối trang để quay lại đầu trang & lt; / p & gt;
& lt; p class = "scroll" & gt; Javascript là một ngôn ngữ lập trình đa mô hình có thể được sử dụng theo sự thuận tiện và yêu cầu của chúng tôi. Nó có các thư viện phong phú. & lt; / p & gt;
& lt; nút onclick = "getBackToBeginning ()" & gt; Bấm vào đây để quay lại đầu trang
& lt; / nút & gt;
& lt; script & gt;
function getBackToBeginning () {window.scrollTo (0, 0);
}
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

Trước khi nhấp vào nút, đầu trang và cuối trang –

JavaScript Cuộn lên đầu - 1

Sau khi nhấp vào nút “Nhấp vào đây để quay lại đầu trang”, chúng tôi được điều hướng đến đầu trang và kết quả như sau –

JavaScript Cuộn lên đầu - 2

Ví dụ # 2

Bây giờ, chúng ta sẽ thấy một ví dụ sẽ sử dụng scrollOptions để đề cập đến hiệu ứng hoạt ảnh khi điều hướng trên scrollTo (). Ở đây, chúng tôi sẽ chuyển đến phần tử mô tả thay vì đầu trang để bạn biết cách scrollTo () với các tham số khác 0 được cung cấp hoạt động và cách chúng tôi có thể điều hướng người dùng đến bất kỳ vị trí cụ thể nào trên cửa sổ. < / p>

Mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; phong cách & gt;
.scroll {
chiều cao: 1000px; background-color: màu hồng;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h1 style = "color: red" & gt; Bộ mã hóa Javascript là tốt nhất
& lt; / h1 & gt;
& lt; b & gt; Trình diễn khả năng cuộn đến vị trí cụ thể của trang cùng với hiệu ứng hoạt ảnh mượt mà để cuộn trong javascript & lt; / b & gt;
& lt; p & gt; Bạn có thể nhấp vào nút được đặt ở cuối trang để quay lại mô tả được đề cập ở đây & lt; / p & gt;
& lt; p class = "scroll" & gt; Javascript là một ngôn ngữ lập trình đa mô hình có thể được sử dụng theo sự thuận tiện và yêu cầu của chúng tôi. Nó có các thư viện phong phú. & lt; / p & gt;
& lt; nút onclick = "getBackToDescription ()" & gt; Bấm vào đây để quay lại mô tả
& lt; / nút & gt;
& lt; script & gt;
function getBackToDescription () {window.scrollTo ({
hàng đầu: 115,
trái: 115, hành vi: 'mượt mà'
}); }
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

Xem Thêm  Biểu đồ bánh Matplotlib - biểu đồ hình tròn âm mưu matplotlib

Đầu ra của đoạn mã trên như sau ở phần đầu và phần cuối khi chúng ta cuộn –

Ví dụ - 2.1

Sau khi nhấp vào nút “Nhấp vào đây để quay lại mô tả” ở dưới cùng, chúng tôi được điều hướng đến dòng mô tả vì dòng này nằm ở 115 pixel từ trên cùng và bên trái của cửa sổ. Đây là nơi chúng tôi tiếp cận sau khi nhấp vào nút dưới cùng.

Ví dụ - 2.2

Kết luận

Bằng cách này, chúng ta có thể sử dụng phương thức scrollTo () của giao diện cửa sổ của DOM để điều hướng người dùng đến bất kỳ vị trí cụ thể nào trên trang vào một số sự kiện. Nếu chúng ta muốn chuyển người dùng lên đầu, chỉ cần chỉ định hai giá trị tọa độ là 0. Chúng tôi thậm chí có thể sử dụng scrollOptions để tạo hiệu ứng hoạt hình. Nhưng hãy nhớ kiểm tra tính tương thích.

Các bài báo được đề xuất

Đây là hướng dẫn về JavaScript Cuộn lên đầu. Ở đây chúng tôi thảo luận về khái niệm cơ bản, cú pháp và các ví dụ khác nhau của javascript cuộn lên đầu với các mã và kết quả đầu ra phù hợp. Bạn cũng có thể xem qua các bài viết liên quan khác của chúng tôi để tìm hiểu thêm –

0

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề cửa sổ cuộn lên đầu

Khu Phố Ngày Xưa – Quang Lập | GIỌNG CA ĐỂ ĐỜI

alt

  • Tác giả: Giọng Ca Để Đời
  • Ngày đăng: 2017-05-29
  • Đánh giá: 4 ⭐ ( 7025 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khu Phố Ngày Xưa – Quang Lập | GIỌNG CA ĐỂ ĐỜI
    Tổng hợp Album BOLERO các ca sĩ https://goo.gl/A3VVnA
    ►Ca sĩ trung tâm giongcadedoi.com:
    Quang Lập https://goo.gl/RBghN9
    Tài Nguyễn https://goo.gl/mbL7t2
    Mai Kiều https://goo.gl/gHmmYS
    Lâm Minh Thảo https://goo.gl/Ftajdi
    Thúy Hà https://goo.gl/Rp2Rj1
    Hoàng Anh https://goo.gl/ZZDDWX
    Đạt Võ https://goo.gl/cwQr2f
    Quang Sơn https://goo.gl/iCcDcH
    Ngọc Hương https://goo.gl/oFoqsG
    Đan Phượng https://goo.gl/rxKE4m
    Chế Kha https://goo.gl/PYp66C
    Vi Thảo https://goo.gl/pGLeUa
    Trọng Việt https://goo.gl/F6ewJ9
    Kim Yến https://goo.gl/zTiKij

    ► Đăng Ký Kênh https://goo.gl/jhNMra
    Lời bài hát – Sáng tác:
    Gió cuộn mây đưa về làm không gian chợt tối.
    Khu phố xưa điêu tàn vì tay quân giặc thù
    Nghẹn ngào tôi nghe như trời đất vỡ
    Xót xa phố phường ôi dâng bao câm hờn
    Lối nhỏ xưa đâu còn và dung nhan thuở ấy
    Tôi biết đâu mà tìm màu trăng xưa dịu hiền
    Còn lại mây đen giăng mờ khắp lối
    Nhuốm màu oán hờn in sâu lòng phố phường

    ĐK: Ôi còn đâu nữa, ai trông ai bên khung cửa
    Ai đưa ai dìu bước nhỏ
    Những lúc mình trên đường về Hẹn nhau đi phố chơi
    Thứ bảy mưa rơi nhiều chiều bơ vơ một bóng
    Trên phố xưa tiu điều lạnh sao ôi rợn người
    (Lặn lội tôi đi đi tìm quá khứ
    Dấu in gót hài theo mây về cuối trời)
    ——————-

    ► Powered by Giong Ca De Doi

1700+ Mẫu Rèm Cửa Sổ Đẹp | Update Bảng Giá Mới Nhất 2022

  • Tác giả: mandep.vn
  • Đánh giá: 4 ⭐ ( 4295 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Rèm cửa đẹp không chỉ giúp che nắng gió mà còn có thể giúp tạo thêm những nét phong cách nổi bật duyên dáng riêng cho ngôi nhà. Nếu bạn đang có ý định lựa chọn mẫu rèm cho không gian nhà mình, hãy tham khảo top 6 mẫu rèm cửa đang được ưa chuộng nhất trong bài viết dưới đây nhé!Những mẫu rèm cửa đẹp, sang trọng được ưa

Cách cuộn lên trong cửa sổ terminal trong khi đầu vào mới được tạo mà không bị ném trở lại xuống dưới (Linux)

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 6080 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Mặc dù tôi hơi muộn, nhưng tôi sẽ đăng bài này lên đây để bất kỳ…

Di chuyển hoặc cuộn qua trang tính

  • Tác giả: support.microsoft.com
  • Đánh giá: 5 ⭐ ( 9442 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có nhiều cách khác nhau để cuộn qua trang tính. Bạn có thể dùng các phím mũi tên, thanh cuộn hoặc chuột để di chuyển giữa các ô và di chuyển nhanh đến các vùng khác nhau của trang tính.

Thanh cuộn Scroll bar là gì? Cách sử dụng Scrollbar

  • Tác giả: wikimaytinh.com
  • Đánh giá: 4 ⭐ ( 4859 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thanh cuộn Scroll bar là một thanh dọc hoặc ngang thường ở ngoài cùng bên phải hoặc dưới cùng của cửa sổ ứng dụng hoặc trang web

Rèm cửa sổ cuốn- cuộn lên cao dây kéo nhựa chống nắng

  • Tác giả: remcua.me
  • Đánh giá: 3 ⭐ ( 7774 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Rèm cửa cuốn là gì? Thiết kế, chất liệu của rèm cửa cuốn như thế nào? Các mẫu rèm của sổ cuốn chống nắng tốt không? Rèm thường được lắp đặt ở đâu? Ở đâu bán rèm cuốn giá rẻ

Cửa sổ cuốn

  • Tác giả: vina-sanwa.com.vn
  • Đánh giá: 5 ⭐ ( 1772 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

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  Hướng dẫn cách hàm COUNT () hoạt động trong MySQL - đếm truy vấn trong mysql