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 : chuyển đến đầu trang javascript

javascript scroll to top

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 đơn 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ụ thể 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.

Xem Thêm  Hàm gọi trong JavaScript: Tìm hiểu cách gọi một hàm - hàm gọi javascript từ một lớp khác

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ó đại diện cho 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 ở phía trên bên trái.

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ó thể hiện 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ó cho biết hoạt ảnh cuộn có mượt mà hay không, nó có thể điều hướng ngay lập tức đến vị trí được chỉ định.

Ví dụ về JavaScript Cuộn lên đầu

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 khả năng 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 rộng lớn. & 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 rộng lớn. & 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  Tạo hộp Phương thức lạ mắt với Vanilla JavaScript - bật lên javascript phương thức

Đầ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 động. 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 ta thảo luận về khái niệm cơ bản, cú pháp và các ví dụ khác nhau về javascript cuộn lên đầu trang 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ủ đề chuyển đến đầu trang javascript

Why you Shouldn’t Learn JavaScript in 2022

alt

  • Tác giả: Stefan Mischook
  • Ngày đăng: 2022-02-03
  • Đánh giá: 4 ⭐ ( 7170 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 🔥 PREMIUM DEVELOPER MENTORING PROGRAM:
    https://studioweb.com/mentoring/

    🔥 CODER’S CAREER PATHS WEBINAR – FREE 29 MINUTE VIDEO:
    https://newsletters.stefanmischook.com/coders_career_paths_signup

    🔥 LIZARD WIZARD KOMODO – TRANSFORMATIONAL MIND TRAINING:
    https://newsletters.stefanmischook.com/komodo

    *************

    Join our Discord: https://discord.gg/qMJfVG5VhB

    WEB HOST PAYS FOR YOUR WEB DESIGN TRAINING IN 2021:a
    https://www.killersites.com/blog/2020/web-hosting-company-pays-for-your-web-design-training/

    POPULAR & EASY CODING COURSES:
    Full stack web developer course: https://school.studioweb.com/store/course/complete_web_developer
    Python 3 Foundations & Certification: https://school.studioweb.com/store/course/python_3_foundations__&_certification_package
    Complete Freelancer: https://school.studioweb.com/store/course/complete_freelancer
    Complete Entrepreneur: https://school.studioweb.com/store/course/complete_web_entrepreneur

    *************

    🦎 Lizard Wizard Course:
    https://school.studioweb.com/store/course/lizard_wizard

    📚 BOOKS TO READ:
    My Beginners HTML5, CSS3: https://amzn.to/2wKsVTh
    … Complements Studioweb courses on HTML5, CSS3 and JavaScript.

    Refactoring: Improving the Design of Existing Code (2nd Edition) https://amzn.to/3o5cTbw
    HeadFirst Design Patterns: https://amzn.to/2LQ0Gdh
    Java Refactoring: Improving the Design of Existing Code (1st Edition) https://amzn.to/3a9nSsZ

    The Naked Ape:
    https://amzn.to/3fhS1Lj

    ✉️ STAY IN CONTACT:
    Stef’s social links:
    Instagram: https://www.instagram.com/stefanmischook/?hl=en
    Twitter: https://twitter.com/killersites

    Stef’s business channel:
    https://www.youtube.com/channel/UCZdr0ql_B240VBVINAX7Acg

    👉 GOOGLE REVIEW:
    https://g.page/studioWebedu/review?mt
    Leave a Google review about Stef.

    READ MY GOOGLE REVIEWS:
    https://bit.ly/2MUii8x

    MY MOUSE & KEYBOARD:
    Logitech Keyboard I use: https://amzn.to/38jYDqE
    Logitech mouse I use: https://amzn.to/2IeVvBj

    SUPPLEMENTS THAT WORK AMAZING FOR ME:

    Protein Essentials Beef Gelatine Powder:
    https://amzn.to/2Pf52vL

    … Healed my very bad knee. If you have joint problems, this *could do miracles for you.

    Webber Naturals 88862 Glucosamine Chondroitin
    https://amzn.to/3ss9WEa

    MY CAMERA GEAR:
    Godox VL150 lights: https://amzn.to/3lhsYZP
    Sigma 18-35 lens: https://amzn.to/33sRh0T
    Canon C300 Mark 3 Cinema Camera

    Thanks!

    Stef

    mentoring developermentoring pythonprogramming javascriptcourses

Điều hướng trang (Redirect) trong JavaScript

  • Tác giả: hoclaptrinh.vn
  • Đánh giá: 3 ⭐ ( 8752 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách điều hướng trang (Redirect) trong JavaScript, điều hướng người dùng trong javascript

Về đầu trang trong JavaScript thuần

  • Tác giả: helpex.vn
  • Đánh giá: 5 ⭐ ( 7947 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một xu hướng phổ biến 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 một hướng dẫn trước đây ( Back…

JavaScript – Chuyển hướng trang

  • Tác giả: hocmagentohayhieuqua.blogspot.com
  • Đánh giá: 4 ⭐ ( 4032 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách chuyển trang trong JavaScript dân lập trình phải biết

  • Tác giả: vn.got-it.ai
  • Đánh giá: 3 ⭐ ( 4262 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn chưa biết cách chuyển trang trong JavaScript? Hãy cùng Got It tham khảo bài viết sau đây để không phải gặp khó khăn khi thực hiện điều này bạn nhé!

Chuyển hướng trang web (redirect) bằng HTML

  • Tác giả: soho.saigonphoenix.com
  • Đánh giá: 3 ⭐ ( 5326 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Làm việc tại nhà và sống cuộc sống tự do. Tư vấn về nghề nghiệp và kiếm tiền. Cách làm web. Thành lập và quản lý công ty.

JavaScript: Chuyển hướng

  • Tác giả: v1study.com
  • Đánh giá: 4 ⭐ ( 1401 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chuyển hướng là một cách để gửi cả người dùng và công cụ tìm kiếm đến một URL khác với URL hiện tại. Chuyển hướng trang web là tự động chuyển hướng một tra

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  Nhập sự kiện chính bằng JavaScript - hộp nhập liệu nhập sự kiện quan trọng

By ads_php