在網(wǎng)站頁面上，點(diǎn)擊某個(gè)超鏈接，頁面跳轉(zhuǎn)到某個(gè)位置，跳轉(zhuǎn)過程有一個(gè)動(dòng)畫滾動(dòng)效果，這是一種比較酷的體驗(yàn)。這種效果是如何實(shí)現(xiàn)的呢，本文通過實(shí)際代碼來詳解實(shí)現(xiàn)方法。

實(shí)現(xiàn)代碼

網(wǎng)頁代碼

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>滾屏效果</title>
<script src="./assets/js/jquery.min.js"></script>
</head>
<body style=" margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; ">
<div id="header" style="height: 100px;">
<a id="tech" class="scroll-a" href="#hi-tech" rel="external nofollow"  rel="external nofollow" >技術(shù)</a>
<a id="code" class="scroll-a" href="#hi-code" rel="external nofollow"  rel="external nofollow" >代碼</a>
</div>

<div style="background-color: gray;height: 600px;">
<h1>間隔</h1>
</div>

<div style="background-color: white;height: 600px;" id="hi-tech">
<h1>技術(shù)</h1>
<a id="tohead1" class="scroll-a" href="#header" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >返回頂部</a>
</div>

<div style="background-color: gray;height: 600px;" id="hi-code">
<h1>代碼</h1>
<a id="tohead" class="scroll-a" href="#header" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >返回頂部</a>
</div>
</body>
<script>
$('#tech').on("click", function () {
$('html,body').animate({scrollTop:$('#hi-tech').offset().top}, 800);
return false;
});
$('#code').on("click", function () {
$('html,body').animate({scrollTop:$('#hi-code').offset().top}, 800);
return false;
});
$('#tohead').on("click", function () {
$('html,body').animate({scrollTop:$('#header').offset().top}, 800);
return false;
});
$('#tohead1').on("click", function () {
$('html,body').animate({scrollTop:$('#header').offset().top}, 800);
return false;
});
</script>
</html>

這里主要用到了jquery的animate方法，實(shí)現(xiàn)思路是，當(dāng)點(diǎn)擊某個(gè)超鏈接時(shí)，通過jquery的animate將屏幕滾動(dòng)到某個(gè)位置。注意animate函數(shù)的兩個(gè)參數(shù)，一個(gè)是滾動(dòng)位置，一個(gè)是動(dòng)畫滾動(dòng)的時(shí)間毫秒。

$('#tech').on("click", function () {
$('html,body').animate({scrollTop:$('#hi-tech').offset().top}, 800);
return false;
});

雖然實(shí)現(xiàn)了效果，這里有個(gè)問題，如果滾動(dòng)的超鏈接較多，那么就要寫不少重復(fù)代碼，還要注意滾動(dòng)位置不要寫錯(cuò)。下面通過改變一下jquery選擇器來優(yōu)化代碼。

優(yōu)化代碼

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>滾屏效果</title>
<script src="./assets/js/jquery.min.js"></script>
</head>
<body style=" margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; ">
<div id="header" style="height: 100px;">
<a id="tech" class="scroll-a" href="#hi-tech" rel="external nofollow"  rel="external nofollow" >技術(shù)</a>
<a id="code" class="scroll-a" href="#hi-code" rel="external nofollow"  rel="external nofollow" >代碼</a>
</div>

<div style="background-color: gray;height: 600px;">
<h1>間隔</h1>
</div>

<div style="background-color: white;height: 600px;" id="hi-tech">
<h1>技術(shù)</h1>
<a id="tohead1" class="scroll-a" href="#header" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >返回頂部</a>
</div>

<div style="background-color: gray;height: 600px;" id="hi-code">
<h1>代碼</h1>
<a id="tohead" class="scroll-a" href="#header" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >返回頂部</a>
</div>
</body>
<script>
$('.scroll-a').on("click", function () {
let scrollto = $(this).attr('href');
$('html,body').animate({scrollTop:$(scrollto).offset().top}, 800);
return false;
});
</script>
</html>

可以看出，通過使用jquery class選擇器，并使用jquery的this對(duì)象獲取滾動(dòng)目標(biāo)，明顯減少了代碼，代碼看起來更加清楚。

到此這篇關(guān)于JavaScript中通用的jquery動(dòng)畫滾屏實(shí)例的文章就介紹到這了,更多相關(guān)JS jquery動(dòng)畫滾屏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: