快捷導(dǎo)航

jQuery實(shí)現(xiàn)錨點(diǎn)向下平滑滾動(dòng)特效示例

更新時(shí)間：2017年08月29日 07:47:13 作者：Dragonir

下面小編就為大家?guī)?lái)一篇jQuery實(shí)現(xiàn)錨點(diǎn)向下平滑滾動(dòng)特效示例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

實(shí)現(xiàn)效果：

實(shí)現(xiàn)原理：

使用jQuery animate()方法實(shí)現(xiàn)頁(yè)面平滑滾動(dòng)特效

$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});

簡(jiǎn)單實(shí)例代碼：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 // Add smooth scrolling to all links
 $("a").on('click', function(event) {
 
  // Make sure this.hash has a value before overriding default behavior
  if (this.hash !== "") {
   // Prevent default anchor click behavior
   event.preventDefault();
 
   // Store hash
   var hash = this.hash;
 
   // Using jQuery's animate() method to add smooth page scroll
   // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
   $('html, body').animate({
    scrollTop: $(hash).offset().top
   }, 800, function(){
  
    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
   });
  } // End if
 });
});
</script>
 <style>
body, html, .main {
  height: 100%;
}
 
section {
  min-height: 100%;
}
</style>
</head>
<body>
<a href="#section2" rel="external nofollow" style="
   font-size: 30px;
   font-weight: bold;
   text-align: center;
">點(diǎn)擊此處平滑滾動(dòng)到第二部分</a>
<div class="main">
 <section></section>
</div>
<div class="main" id="section2">
 <section style="
   background-color: #03c03c;
   color: #fff;
   font-size: 30px;
   text-align: center">
   SECTION 2
 </section>
</div>
</body>
</html>

以上這篇jQuery實(shí)現(xiàn)錨點(diǎn)向下平滑滾動(dòng)特效示例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jquery對(duì)象和javascript對(duì)象即DOM對(duì)象相互轉(zhuǎn)換
對(duì)于已經(jīng)是一個(gè) DOM 對(duì)象，只需要用 $() 把DOM對(duì)象包裝起來(lái)，就可以獲得一個(gè) jQuery 對(duì)象了，使用[index]和.get(index)可以轉(zhuǎn)為DOM對(duì)象
2014-08-08
jQuery對(duì)表單的操作代碼集合
jQuery對(duì)表單的操作代碼集合，學(xué)習(xí)jquery的朋友可以參考下。
2011-04-04
淺談jquery選擇器 :first與:first-child的區(qū)別
下面小編就為大家?guī)?lái)一篇淺談jquery選擇器 :first與:first-child的區(qū)別。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-11-11
jQuery實(shí)現(xiàn)表單input中提示文字value隨鼠標(biāo)焦點(diǎn)移進(jìn)移出而顯示或隱藏的代碼
表單input中提示文字value隨鼠標(biāo)焦點(diǎn)移進(jìn)移出而顯示或隱藏的jQuery代碼
2010-03-03
基于jquery鼠標(biāo)點(diǎn)擊其它地方隱藏層的實(shí)例代碼
基于jquery鼠標(biāo)點(diǎn)擊其它地方隱藏層的實(shí)例代碼，需要的朋友可以參考下。
2011-01-01
jQuery插件slides實(shí)現(xiàn)無(wú)縫輪播圖特效
Slides – 是一個(gè)簡(jiǎn)單的，容易定制和風(fēng)格化，的jQuery幻燈片插件。Slides提供褪色或幻燈片過(guò)渡效果，圖像淡入淡出，圖像預(yù)壓，自動(dòng)生成分頁(yè)，循環(huán)，自動(dòng)播放的自定義等很多選項(xiàng)。用Slides插件，你可以隨機(jī)播放幻燈片，設(shè)定那一套您想要開(kāi)始幻燈片。
2015-04-04
基于MVC5和Bootstrap的jQuery TreeView樹(shù)形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合
這篇文章主要介紹了基于MVC5和Bootstrap的jQuery TreeView樹(shù)形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合的相關(guān)者，小編推薦使用返回list集合的方法，具體原因大家可以根據(jù)本文學(xué)習(xí)下
2016-08-08
jquery制作隨機(jī)彈跳的小球特效
這篇文章主要介紹了jquery制作隨機(jī)彈跳的小球特效,需要的朋友可以參考下
2015-02-02
jQuery 學(xué)習(xí)第五課 Ajax 使用說(shuō)明
關(guān)于ajax早已不是新鮮話(huà)題，而jQuery使ajax變得無(wú)比簡(jiǎn)單。
2010-05-05
jQuery實(shí)現(xiàn)復(fù)制到粘貼板功能
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)復(fù)制到粘貼板功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02