How to use jQuery to achieve smooth scrolling of the page
How to use jQuery to achieve smooth scrolling on the page: first open the corresponding code file; then use jQuery's animation tag to achieve smooth scrolling.
The operating environment of this tutorial: Windows 7 system, jquery version 3.2.1, Dell G3 computer.
Smooth scrolling refers to the behavior of scrolling within the page. In web pages, I often see buttons such as "Return to Top". This is achieved using smooth scrolling. The following article Let’s introduce how to use jQuery to achieve smooth scrolling.
How to achieve smooth scrolling
The How to use jQuery to achieve smooth scrolling of the page code is as follows
$(function(){
$('a[href^="#"]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});The above code can achieve smooth scrolling, you can change the "speed" to change the scroll speed, plus, by returning "false" at the end, we try not to affect the URL.
Since WordPress conflicts with "$", we change "$" to "jQuery", below we use jQuery's animation tag to achieve smooth scrolling.
Let’s look at specific examples
The code is as follows
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sample.css" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$('a[href^="#"]').click(function() {
var speed = 400;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
<title>jQuery</title>
</head>
<body>
<h1 id="目录">目录</h1>
<ul>
<li><a href="#1">sample1</a></li>
<li><a href="#2">sample2</a></li>
<li><a href="#3">sample3</a></li>
<li><a href="#4">sample4</a></li>
</ul>
<div id="1">
<h2 id="sample">sample1</h2>
<a class="button" href="#index">Topへ</a>
</div>
<div id="2">
<h2 id="sample">sample2</h2>
<a class="button" href="#index">Topへ</a>
</div>
<div id="3">
<h2 id="sample">sample3</h2>
<a class="button" href="#index">Topへ</a>
</div>
<div id="4">
<h2 id="sample">sample4</h2>
<a class="button" href="#index">Topへ</a>
</div>
</body>
</html>CSS code
div{
height: 1000px;
}The running results are as follows: only the above part is screenshot, and there are sample1, sample2, sample3, and sample4 below.
The above is the detailed content of How to use jQuery to achieve smooth scrolling of the page. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1664
14
1423
52
1317
25
1268
29
1245
24
How to achieve the smooth scrolling effect of zooming in and out of background images on web pages through pure CSS
Oct 20, 2023 pm 12:34 PM
How to achieve smooth scrolling and zoom-in effects of background images on web pages through pure CSS. In modern web design, background images are one of the most common elements. In order to improve the visual effect of the web page, we can use CSS to achieve a smooth scrolling zooming effect of the background image, thereby giving users a better browsing experience. First, create a container element with this effect in HTML: <divclass="background-container">
How to achieve smooth scrolling background image gradient effect on web pages through pure CSS
Oct 20, 2023 pm 01:49 PM
How to achieve smooth scrolling background image gradient effect on web pages through pure CSS. In modern web design, rich background effects can improve the aesthetics and user experience of web pages. Among them, smooth scrolling and background image gradient effects are commonly used design methods. This article will introduce how to achieve the smooth scrolling background image gradient effect of web pages through pure CSS, and provide specific code examples. 1. Smooth scrolling effect First, we need to create a container with a scrolling effect. In HTML, you can use a <div>
How to achieve smooth scrolling to the top button with CSS
Nov 21, 2023 am 08:08 AM
How to use CSS to implement smooth scrolling to the top button In web design, in order to improve user experience, it is very important to allow users to quickly return to the top of the page. By implementing a button that smoothly scrolls to the top, the user's process of returning to the top can be made smoother and more beautiful. This article will introduce how to use CSS to achieve this function and provide specific code examples. To implement a button that smoothly scrolls to the top, you need to use CSS to control the button's style and animation effects, and combine it with JavaScript to implement the scrolling function.
How to achieve smooth scrolling to a specified element position using CSS
Nov 21, 2023 pm 02:48 PM
During website development, it is often necessary to achieve smooth scrolling to a specified element position. This effect can improve the user experience of the website and allow users to browse the page content more naturally. There are many ways to achieve this effect, among which using CSS is a relatively simple one. The following will introduce how to use CSS to achieve smooth scrolling to the specified element position, and provide specific code examples. Implementation Principle To achieve smooth scrolling to the specified element position, the scroll-behavior attribute in CSS needs to be used. scroll-be
How to achieve smooth scrolling effect of images in JavaScript?
Oct 20, 2023 am 09:35 AM
How to achieve smooth scrolling effect of images with JavaScript? In web design, the scrolling effect of images can make the page more vivid and attractive. JavaScript is a commonly used scripting language that can be used to achieve this smooth scrolling effect. This article will introduce how to use JavaScript to achieve smooth scrolling effects on images and provide code examples. First, we need to create a container containing multiple images to display the images that need to be scrolled. This container can be a div element, usually
How to achieve smooth scrolling to anchor position using CSS
Nov 21, 2023 pm 03:28 PM
How to use CSS to achieve smooth scrolling to the anchor position. In web design, the anchor position refers to a specific position on the page. When the user clicks a link in the page, the page will smoothly scroll to that position. This effect not only brings a good user experience, but also improves the beauty of the page. This article will introduce how to use CSS to achieve smooth scrolling to the anchor point position, and give specific code examples. 1. HTML structure First, we need to set anchor points in HTML. Add an id attribute to the position where you need to scroll smoothly as the anchor point.
How to achieve smooth scrolling background gradient effect on web pages through pure CSS
Oct 25, 2023 am 11:19 AM
How to realize the smooth scrolling background gradient effect of web pages through pure CSS 1. Introduction In web design, the background gradient effect can add beauty and dynamics to the website. Smooth scrolling background gradients can make web pages more attractive and give users a comfortable browsing experience. This article will introduce how to achieve the smooth scrolling background gradient effect of web pages through pure CSS, and provide specific code examples. 2. Implementation principle of background gradient effect Before realizing smooth scrolling background gradient effect, we first understand the implementation principle of background gradient. CSS can be passed
How to achieve smooth scrolling background hollowing effect on web pages through pure CSS
Oct 19, 2023 am 11:37 AM
How to achieve smooth scrolling background hollowing out effect of web pages through pure CSS. With the continuous development of Internet technology, the design of web pages has become increasingly diversified and complex. A good-looking web page often requires attention to detail and innovation. Among them, the smooth scrolling background hollow effect is one of the design elements that has become increasingly popular in recent years. This effect can make the web page look more vivid and interesting, and can attract the user's attention and interest. In this article, I will introduce how to achieve the smooth scrolling background hollow effect of web pages through pure CSS, and provide specific code
