//锚点跳转平滑过渡距离顶部距离0
$('.floor-bar-left a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 300);
return false;
});
//锚点跳转平滑过渡距离顶部距离100
$('.floor-bar-left a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top - 100
}, 300);
return false;
});
方法一:纯css实现回到顶部
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯css回到顶部</title>
</head>
<body>
<a name="top"></a>
<div style="width:100%; height:1500px;"></div>
<a href="#top" style="display:block;width:35px; height:42px; border:1px solid #000;
position:fixed; right:20px; bottom:20px;">回到<br/>顶部</a>
</body>
</html>
方法二:jq的animate()方法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>回到顶部</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<style>
.f_conct {background-color: #0d5baa;position: fixed; z-index: 9999999;
top: 200px; right: -10px; cursor: pointer; transition: all .3s ease; }
.f_bar .f_top {background: #0d5baa url(images/fiex.png) no-repeat 0 -8px; }
</style>
</head>
<body>
<div style="height: 2000px"></div>
<div class="f_conct" style="right:0;">
<div class="f_bar">
<ul>
<li class="f_top">返回顶部</li>
</ul>
</div>
</div>
------重点!!!!!!!------
<script>
$(".f_top").click(function(){
$("html,body").animate({
'scrollTop':'0'
},300);
});
/*如有侵权,请联系删除
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
嵌套animate()方法的解释---(来自w3cschool)
jQuery animate() 方法用于创建自定义动画。
语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性 。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用;它把 <div> 元素移动到左边,直到 left
属性等于 250 像素为止:
实例
$("button").click(function(){
$("div").animate({left:'250px'});
}); */
</script>
</body>
</html>