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定位技术机制
一.锚点是什么 锚点就等同于火影中的“飞雷神之术”,我们先看百科中锚点的解释: 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部.然后可以创建到这些命名锚记的链接,这些链接可快 ...
随机推荐
- 转载：jQuery实现返回顶部功能
转自:http://blog.csdn.net/itmyhome1990/article/details/25340705 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图 ...
- Texture Filter中的Bilinear、Trilinear以及Anistropic Filtering
1. 为什么在纹理采样时需要texture filter(纹理过滤)?我们的纹理是要贴到三维图形表面的,而三维图形上的pixel中心和纹理上的texel中心并不一至(pixel不一定对应texture ...
- 336-Palindrome Pairs
336-Palindrome Pairs Given a list of unique words, find all pairs of distinct indices (i, j) in the ...
- switch语句下的变量声明和定义
switch语句下的变量声明和定义的问题: switch...case...语句中存在声明和定义会出现一些问题.这个由switch语法特性决定的, switch中每个case都是平等的层次,区别于一般 ...
- ABP JTable如何手动刷新子表数据
function getSubMaster() { _$masterTable.find('.jtable-child-table-container').jtable('reload'); }
- [转]反向ajax项目
ASP.NET WebSocket & Comet Ajax Library (Reverse Ajax - Server Push) 项目链接:http://pokein.codeple ...
- Window Server 2012 R2 下 IE11 浏览器 无法安装Flash 怎么解决
不知道是不是我这个的系统的问题,不仅仅是图片有问题,Flash也有问题.用IE打开页面,一直提示安装,简直不胜其烦.尽管我有下载很多浏览器,但习惯了IE,所以也没想用其他浏览器代替IE. 刚开始我是点 ...
- 16.10.18学到的Java知识
1. 突然间发现自己忘了关于自增自减运算符放在变量前后的区别是什么了? 于是乎,我查了资料. 如果只对自变量进行加1或减1的时候,放在前面和后面都是没有区别的. 但是,如果自增自减运算符使用在需要赋值 ...
- 【go语言】RSA加解密
关于go语言的RSA加解密的介绍,这里有一篇文章,已经介绍的很完整了. 对应的go语言的加解密代码,参考git. 因为原文跨语言是跟php,我这里要跟c语言进行交互,所以,这里贴上c语言的例子. 参考 ...
- git资料图