通過幾句jquery代碼實現頁面平滑滾動到某一錨點的效果。實現代碼來源於https://css-tricks.com/snippets/jquery/smooth-scrolling
實現的jquery代碼如下：
$('a[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1000); return false; } } });
這里我們就先了解一下location對象及它的一些屬性：
location對象屬於window對象，包含有關當前url的信息。
location對象的屬性：
location.href：返回當前頁的完整的url；
location.hostname：返回當前url的主機名；
location.pathname：返回當前url的路徑名（從/開始）；
location.hash：返回一個url的錨部分（從#號開始的部分包括#）；
location.host：返回一個url的主機名和端口；
location.port：返回一個url服務器使用的端口號；
location.protocol：返回一個url協議；
location.search：返回一個url的查詢部分（從?號開始）；
例如，當前頁面的url是：http://www.cnblogs.com/sapho/p/6022829.html
那么location.href = “http://www.cnblogs.com/sapho/p/6022829.html”；
location.hostname = “www.cnblogs.com”；
location.host = “www.cnblogs.com”；
location.pathname = “/sapho/p/6022829.html”；
location.protocol = “http：”
demo如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用jquery實現平滑的頁面滾動效果</title> <style> *{ margin: 0; padding: 0; } body { font-family:"Microsoft YaHei"; } ul,li{ list-style: none; } a{ text-decoration: none; color: #0a78fa; } a:hover{ color: #fa5275; } #page-wrap { max-width: 500px; margin: 1rem auto; padding: 1rem; } h1, h2 { line-height: 1.2; } h1{ margin-bottom: 20px; } p, ul, h2 { margin: 0 0 1rem 0; } p{ font-size: 14px; text-indent:20px; } </style> </head> <body> <div id="page-wrap"> <h1 id="top">竹文化</h1> <ul> <li><a href="#two">跳轉到第二章</a></li> <li><a href="#three">跳轉到第三章</a></li> </ul> <h2 id="one">第一章</h2> <p>竹為高大、生長迅速的禾草類植物，莖為木質。分布於熱帶、亞熱帶至暖溫帶地區，東亞、東南亞和印度洋及太平洋島嶼上分布最集中，種類也最多。 竹枝桿挺拔，修長，四季青翠，傲雪凌霜，倍受中國人民喜愛，有“梅蘭竹菊”四君子之一，“梅松竹”歲寒三友之一等美稱。 中國古今文人墨客，嗜竹詠竹者眾多。 </p> <p> 竹文化是漢族勞動人民在長期生產實踐和文化活動中，把竹子形態特征總結成了一種做人的精神風貌，如虛心、氣節等， 其內涵已形成漢民族品格、稟賦和精神象征。看到竹子，人們自然想到它不畏逆境，不懼艱辛，中通外直，寧折不屈的品格， 這是一種取之不盡的精神財富，也正是竹子特殊的審美價值。 </p> <p>竹為高大、生長迅速的禾草類植物，莖為木質。分布於熱帶、亞熱帶至暖溫帶地區，東亞、東南亞和印度洋及太平洋島嶼上分布最集中，種類也最多。 竹枝桿挺拔，修長，四季青翠，傲雪凌霜，倍受中國人民喜愛，有“梅蘭竹菊”四君子之一，“梅松竹”歲寒三友之一等美稱。 中國古今文人墨客，嗜竹詠竹者眾多。 </p> <p> 竹文化是漢族勞動人民在長期生產實踐和文化活動中，把竹子形態特征總結成了一種做人的精神風貌，如虛心、氣節等， 其內涵已形成漢民族品格、稟賦和精神象征。看到竹子，人們自然想到它不畏逆境，不懼艱辛，中通外直，寧折不屈的品格， 這是一種取之不盡的精神財富，也正是竹子特殊的審美價值。 </p> <h2 id="two">第二章</h2> <p><a href="#top">回到頂部</a></p> <p>竹為高大、生長迅速的禾草類植物，莖為木質。分布於熱帶、亞熱帶至暖溫帶地區，東亞、東南亞和印度洋及太平洋島嶼上分布最集中，種類也最多。 竹枝桿挺拔，修長，四季青翠，傲雪凌霜，倍受中國人民喜愛，有“梅蘭竹菊”四君子之一，“梅松竹”歲寒三友之一等美稱。 中國古今文人墨客，嗜竹詠竹者眾多。 </p> <p> 竹文化是漢族勞動人民在長期生產實踐和文化活動中，把竹子形態特征總結成了一種做人的精神風貌，如虛心、氣節等， 其內涵已形成漢民族品格、稟賦和精神象征。看到竹子，人們自然想到它不畏逆境，不懼艱辛，中通外直，寧折不屈的品格， 這是一種取之不盡的精神財富，也正是竹子特殊的審美價值。 </p> <h2 id="three">第三章</h2> <p><a href="#top">回到頂部</a></p> <p>竹為高大、生長迅速的禾草類植物，莖為木質。分布於熱帶、亞熱帶至暖溫帶地區，東亞、東南亞和印度洋及太平洋島嶼上分布最集中，種類也最多。 竹枝桿挺拔，修長，四季青翠，傲雪凌霜，倍受中國人民喜愛，有“梅蘭竹菊”四君子之一，“梅松竹”歲寒三友之一等美稱。 中國古今文人墨客，嗜竹詠竹者眾多。 </p> <p> 竹文化是漢族勞動人民在長期生產實踐和文化活動中，把竹子形態特征總結成了一種做人的精神風貌，如虛心、氣節等， 其內涵已形成漢民族品格、稟賦和精神象征。看到竹子，人們自然想到它不畏逆境，不懼艱辛，中通外直，寧折不屈的品格， 這是一種取之不盡的精神財富，也正是竹子特殊的審美價值。 </p> <p>竹為高大、生長迅速的禾草類植物，莖為木質。分布於熱帶、亞熱帶至暖溫帶地區，東亞、東南亞和印度洋及太平洋島嶼上分布最集中，種類也最多。 竹枝桿挺拔，修長，四季青翠，傲雪凌霜，倍受中國人民喜愛，有“梅蘭竹菊”四君子之一，“梅松竹”歲寒三友之一等美稱。 中國古今文人墨客，嗜竹詠竹者眾多。 </p> <p> 竹文化是漢族勞動人民在長期生產實踐和文化活動中，把竹子形態特征總結成了一種做人的精神風貌，如虛心、氣節等， 其內涵已形成漢民族品格、稟賦和精神象征。看到竹子，人們自然想到它不畏逆境，不懼艱辛，中通外直，寧折不屈的品格， 這是一種取之不盡的精神財富，也正是竹子特殊的審美價值。 </p> </div> <script src="./jquery-1.11.3.min.js"></script> <script> $('a[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); </script> </body> </html>