通过几句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>