jQuery实现锚点平滑定位
2024-08-24 06:14:04
一般的锚点,就是点击一个按钮或者其他元素可以实现定位效果,当然可以使用锚点实现,但是这个不够美观,没有平滑的动画过渡效果,下面就通过代码实例介绍一下利用jquery实现平滑的定位效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title></title>
<style type="text/css">
.box{
height:200px;
width:100%;
background:#ccc;
margin:10px 0;
}
.location{
position:fixed;
right:0;
bottom:10px;
width:20px;
background:#FFC;
padding:5px;
cursor:pointer;
color:#003
}
#div1{
width:100px;
height:100px;
background:green;
margin-top:150px;
}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.scroll_a').click(function(){
$('html,body').animate({scrollTop:$('#div1').offset().top}, 800);
});
});
</script>
</head>
<body style="height:1000px">
<div id="div1"></div>
<div class="location">
<p class="scroll_a">顶部</p>
</div>
</body>
</html>
其中scrollTop属性规定的是页面被向上滚动遮挡的尺寸,而offset().top则是匹配元素距离文档顶部的距离,所以设置scrollTop的属性值为offset().top就可以将指定元素定位于页面文档去的顶部边缘。
最新文章
- 【代码笔记】iOS-通过颜色来生成一个纯色图片
- HDU 1160 DP最长子序列
- asp.net TreeView控件绑定数据库显示信息
- Java基础-设计模式之-代理模式Proxy
- 剑指offer系列33-----把二叉树打印成多行
- EF-Code First 入门
- JAVA使用原始HttpURLConnection发送POST数据
- (转)sql 时间转换格式 convert(varchar(10),字段名,转换格式)
- python学习记录20181207
- [matlab] 16.多约束非线性规划 ga工具箱解决 [带不等式约束]
- myeclipse中的classpath .
- 家庭记账本之Github账号注册与安装(二)
- python 之 知识点(1)
- 测试那些事儿—web测试方法之输入框
- Mybatis-Plus3.0入门手册
- C语言基础第四次作业
- SED单行脚本快速参考(Unix 流编辑器)
- 背水一战 Windows 10 (56) - 控件(集合类): ListViewBase - 基础知识, 拖动项
- 2018.10.20 NOIP模拟 蛋糕(线段树+贪心/lis)
- DatagridView内容自动换行和换行符换行
热门文章
- 介绍开源的.net通信框架NetworkComms框架之四 消息边界
- mysql 常用查询
- 从西直门立交桥谈IT架构与重构(干货)
- JSP开发模式1(简单注册功能)
- 后台dom拼接xml,动态显示统计图
- history对象的一些知识点
- C# 去除字符串首尾字符或字符串
- 解決 java.security.cert.CertificateException: Certificates does not conform to algorithm constraints
- Asp.net操作cookie大全
- [转]caffe的配置过程