jQuery实现锚点平滑定位
一般的锚点，就是点击一个按钮或者其他元素可以实现定位效果，当然可以使用锚点实现，但是这个不够美观，没有平滑的动画过渡效果，下面就通过代码实例介绍一下利用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就可以将指定元素定位于页面文档去的顶部边缘。
jQuery实现锚点平滑定位的更多相关文章
- JQuery实现锚点平滑滚动
一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现这个效果: 比如,这里我们将通过点击<a> ...
- jQuery实现锚点滑动定位
go=function(index){ var top = $('#caseNewGuide' + index).offset().top; $('html, body').animate({ scr ...
- vue2.0模拟锚点实现定位平滑滚动
vue2.0模拟锚点实现定位平滑滚动 效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...
- jQuery实现页面内锚点平滑跳转
平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...
- 【前端】jQuery实现锚点向下平滑滚动特效
jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...
- jQuery实现页内锚点平滑跳转
当页面内容长多,导致页面高度过高或过宽是,浏览起来就有点费劲,不过使用了锚点平滑跳转效果可以实现页面的跳转,从而加快速浏览想要浏览的模块.具体做法如下: 首先是菜单(锚点)的写法 <a href ...
- jQuery制作顶部与左侧锚点板块定位功能带动画跳转特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 平滑定位
<script type="text/javascript"> function intval(v){ v = parseInt(v); return isNaN(v) ...
- URL锚点HTML定位技术机制
一.锚点是什么 锚点就等同于火影中的“飞雷神之术”,我们先看百科中锚点的解释: 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部.然后可以创建到这些命名锚记的链接,这些链接可快 ...
随机推荐
- 使用Word发布文章到 WordPress 博客
使用Word发布文章到 WordPress 博客 我们都知道,WordPress 自带的编辑器功能比较弱,而使用 Word 编辑文档却功能强大.其实我们使用 Word 编辑好的文档也是可以直接发布到 ...
- eclipse error pages打红X的解决方法
当我在关闭eclipse时,漫长的等待进度条,我情急之下强关了系统.悲催的是再打开eclipse时新建动态web项目时,总是出现error pages打红X问题,程序执行等都不受影响,就是看着不爽.网 ...
- 你不知道的this指向
javascript中,我们预想的this指向,有时候与预期不一样,直接上经典例子 window.name=2; var test={ 'name':1, 'getName':function(){ ...
- cell当中的按钮如何获得cell内容
cell当中的btn添加方法 [cell.btn addTarget:self action:@selector(btnClickedwith:) forControlEvents:UIControl ...
- docker--buildbot安装
curl -L https://github.com/docker/compose/releases/download/1.8.0/docker-compose-`uname -s`-`uname - ...
- Dapper关联查询
1.一对一: using (IDbConnection connecton = new MySqlConnection(ConfigurationManager.ConnectionStrings[& ...
- 构造 & 析构 & 匿名对象
以前仅知道创建对象,但对匿名对象的了解基本为0. 通过阅读google chromium源代码 中关于 log 的使用,查阅相关资料,了解了一下匿名对象,予以记录. 什么是匿名对象 匿名对象可以理 ...
- 4.代码同时托管到github和git.oschina.net
我的开源项目托管在Github,同时在Git@OSC也有备份,有两个地方,是不是很麻烦呢?非也非也,下面介绍一下我是怎么做的. 1.先在Github新建一个项目,点击Github主页右上角的加号 -& ...
- LSD-SLAM深入学习（1）-基本介绍与ros下的安装
前言 借鉴来自RGB-D数据处理的两种方法-基于特征与基于整体的,同样可以考虑整个图片的匹配,而不是只考虑特征点的…… 一般这种稠密的方法需要很大的计算量,DTAM: Dense tracking a ...
- sublimeText3安装emmet(For Mac)
每次重装st,安装emmet都困难重重,对上一次依照网上查的资料一步步做好了,这次又忘了如何操作,结果又是网上搜索打开一箩筐的网页. 终于决定,把这些惨痛的经历记录下来,要用的话自己看,也可能可以帮助 ...