Hongmu Notes
Home Language Notes jquery click to jump to the top of the web page
Language Notes JavaScript

jquery click to jump to the top of the web page

jquery click to jump to the top of the web page

You can use jQuery to jump to the top of the web page after clicking on an element. Here's a simple way to do it:

$(document).ready(function() {
  // 监听元素的点击事件
  $('#my-element').click(function() {
    // 滚动到顶部
    $('html, body').animate({scrollTop: 0}, 'slow');
  });
});

The above code first uses $(document).ready() function to ensure that the document is loaded before executing the code. Then, it uses click() function to listen for a function with id="my-element" The click event of the element. When the user clicks on the element,animate() The function will scroll the page to the top.

Note, use animate() The function to achieve smooth scrolling to the top requires jQuery's animation feature support. If you want to use native JavaScript to jump to the top of the page, you can use window.scrollTo() methods, for example:

$(document).ready(function() {
  // 监听元素的点击事件
  $('#my-element').click(function() {
    // 滚动到顶部
    window.scrollTo(0, 0);
  });
});

This method will instantly scroll the page to the top instead of scrolling smoothly.

微信赞赏

WeChat

支付宝赞赏

Alipay

✍️ Author: Hong Mu

webmaster · Thanks for reading, stay tuned for more exciting content

Author homepage View home page →

Related articles

js move the mouse up to modify the style attribute

js move the mouse up to modify the style attribute Language Notes JavaScript

When the mouse hovers over the element, the color changes to red; when the mouse leaves the element, the color changes to black. To retrieve an element by its ID: `document.getElementById()`; Event handler for mouse hover: `onmouseover`; Event handler for mouse leave: `onmouseout`.<!DOCTYPE html><html lang= "en">...
👁 130

Recommended reading

Why can't I delete a PHP file that starts with a certain pattern?

Why can't I delete a PHP file that starts with a certain pattern? Language Notes PHP

In the previous article, titled "PHP: Deleting All Files and Directories in the Current Directory," it was mentioned that most files could be deleted! However, a problem arose – the solution described in that article did not work! Let's explore the reason! The `glob` function is a versatile file system function that returns the names of files or directories matching a specified pattern. When using the `glob` function in PHP, you may notice that it cannot find files ending with a dot (...).
👁 206
(Adaptive mobile version) PBootCMS template for micro-business supply chain websites – Download e-commerce and micro-business agency website templates – 0348

(Adaptive mobile version) PBootCMS template for micro-business supply chain websites – Download e-commerce and micro-business agency website templates – 0348 Practical Collection pbootcms Template

An adaptive mobile-friendly PbootCMS website template designed for WeChat business sellers and online store agents, featuring a practical information flow layout ideal for displaying WeChat business products, agent policies, and supply chain information. This template helps WeChat business platforms or supply chain websites attract agents and distributors online. Template Preview | Installation Instructions | Website Backend: /admin.php | Username: admin | Password: admin | Extraction Password: www.4s5.cn | Related Articles: Pbo...
👁 49
Wood Preservation & Building Materials Website Template 0257

Wood Preservation & Building Materials Website Template 0257 Practical Collection Yiyou template

This EyouCMS template is ideal for the wood, preservative-treated wood, and building materials industries. Its natural and minimalist design effectively showcases preservative-treated wood products, timber and construction materials, project cases, and brand stories. It helps wood-based enterprises showcase their products online and attract clients in the construction and outdoor industries. Template Display | Installation Instructions | Website Backend: /login.php | Username: admin | Password: admin | Related Articles: Summary of Common Installation Issues for EyouCMS | EyouCMS...
👁 40
PHP function to delete all files and directories within a specified directory; allows for excluding certain files.

PHP function to delete all files and directories within a specified directory; allows for excluding certain files. Language Notes PHP

I really cried! After a lot of troubleshooting, I realized that the `glob` function was a bit tricky to use – it didn't let me retrieve the files properly. Then, I looked into the system's hidden files, and after more digging, I discovered that there were other functions available to query all files! In PHP, you can delete all files and directories within a specified directory using a function with two parameters: one for the directory to be deleted and another for an array of files that should not be deleted. The function is: `function deleteDirectory($direc...`
👁 179
(Adaptive mobile phone version) Express logistics company pbootcms website template html responsive express freight website source code download 0349

(Adaptive mobile phone version) Express logistics company pbootcms website template html responsive express freight website source code download 0349 Practical Collection pbootcms Template

This set of PbootCMS responsive website templates for express delivery and logistics companies is adaptable to mobile phones. The design style is efficient and modern, suitable for express delivery and freight companies to display their service network and distribution capabilities. It helps logistics companies display their brands online and attract e-commerce and corporate customers. Template display Installation instructions Website backend:/admin.php Account: admin Password: admin Unzip password: www.4s5.cn Related articles P…
👁 58
Home Textiles & Interior Decoration Website Template 0258

Home Textiles & Interior Decoration Website Template 0258 Practical Collection Yiyou template

An EyouCMS website template designed for the home textiles and home decor industry. Its warm and practical design style is ideal for showcasing home textile products, home decor items, soft furnishing combinations, and brand identities. This template helps home textile brands showcase their products online and attract domestic consumers. Template Display | Installation Instructions | Website Backend: /login.php | Username: admin | Password: admin | Related Articles: Summary of Common Installation Issues for EyouCMS | EyouCMS (E...
👁 36