如何使用jQuery實現頁面的平滑滾動
- 不言原創
- 2018-12-26 16:43:555504瀏覽
使用jQuery實作頁面平滑捲動的方法：先開啟對應的程式碼檔案；然後使用jQuery的動畫標籤來實現平滑滾動即可。
本教學操作環境：windows7系統、jquery3.2.1版、Dell G3電腦。
平滑滾動是指在頁面內滾動的行為，在網頁中，我經常會看到諸如“返回頂部”之類的按鈕，這就是使用平滑滾動實現的，接下來的這篇文章我們就來介紹使用jQuery實現平滑滾動的方法。
如何實現平滑滾動
如何使用jQuery實現頁面的平滑滾動的程式碼如下
$(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>
<h1 id="index">目录</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>sample1</h2>
<a class="button" href="#index">Topへ</a>
</div>
<div id="2">
<h2>sample2</h2>
<a class="button" href="#index">Topへ</a>
</div>
<div id="3">
<h2>sample3</h2>
<a class="button" href="#index">Topへ</a>
</div>
<div id="4">
<h2>sample4</h2>
<a class="button" href="#index">Topへ</a>
</div>
</body>
</html>CSS程式碼
div{
height: 1000px;
}運行結果如下：只截圖了上面的部分，下面還有sample1、sample2、sample3、sample4。
以上是如何使用jQuery實現頁面的平滑滾動的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn