這篇文章給大家分享的是有關使用jQuery實現頁面平滑滾動的方法的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
平滑滾動是指在頁面內滾動的行為，在網頁中，我經常會看到諸如“返回頂部”之類的按鈕，這就是使用平滑滾動實現的
如何實現平滑滾動
JavaScript的代碼如下
$(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;
});
});上述代碼可以實現平滑滾動，你可以通過改變“speed”來更改滾動速度，另外，通過最后返回“false”，我們盡量不影響URL。
由于WordPress與“$”沖突，我們將“$”更改為“jQuery”，下面我們使用jQuery的動畫標簽來實現平滑滾動。
我們來看具體的示例
代碼如下
HTML代碼
<!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>
<h2 id="index">目錄</h2>
<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">
<h3>sample1</h3>
<a class="button" href="#index">Topへ</a>
</div>
<div id="2">
<h3>sample2</h3>
<a class="button" href="#index">Topへ</a>
</div>
<div id="3">
<h3>sample3</h3>
<a class="button" href="#index">Topへ</a>
</div>
<div id="4">
<h3>sample4</h3>
<a class="button" href="#index">Topへ</a>
</div>
</body>
</html>CSS代碼
div{
height: 1000px;
}運行結果如下：只截圖了上面的部分，下面還有sample1、sample2、sample3、sample4。
感謝各位的閱讀！關于使用jQuery實現頁面平滑滾動的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
