您的位置：首页 > Web前端 > JQuery

用jquery实现平滑的页面滚动效果

2016-11-02 14:31 645 查看
通过几句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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航