锚标记平滑移动

发布时间：2020-06-05 02:25:32 来源：网络阅读：758 作者：canyan3073 栏目：web开发

由于项目中要用到，遂记录下来

用JQuery实现锚标记平滑移动

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>锚标记平滑移动</title> 
 
</head> 
 
<body> 
<div id="top" > 
    顶部 <a href="#bottom" class="smooth">移动到底部</a> 
</div> 
<div id="appendBox"> 
   <!--填充内容--> 
</div> 
<div id="bottom" > 
    底部  <a href="#top" class="smooth">移动到顶部</a> 
</div> 
<!--替换为自己本地JQuery函数库--> 
<script src="jquery-1.4.2.min.js"type="text/javascript"></script> 
<script type="text/javascript"> 
$(".smooth").click(function(){ 
    var href = $(this).attr("href"); 
    var pos = $(href).offset().top; 
    $("html,body").animate({scrollTop: pos}, 1000);  
    return false; 
}); 
</script> 
</body> 
</html>

向AI问一下细节

锚标记平滑移动

猜你喜欢

最新资讯

相关推荐

相关标签