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定位技术机制
一.锚点是什么 锚点就等同于火影中的“飞雷神之术”,我们先看百科中锚点的解释: 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部.然后可以创建到这些命名锚记的链接,这些链接可快 ...
随机推荐
- Android(Logcat、Monitors)
刚学习Android 的时候总喜欢输出"Hello Word"这样的信息来判断是不是执行了某个方法,最初连Android Studio控制台.断点这些在哪里都要找好久,现在好了多点 ...
- Linux Daemon 类程序
1.后台daemon程序(精灵程序) 在Linux中专门提供了一个函数来完成这个daemon化的过程,这个函数的原型如下 int daemon (int __nochdir, int __noclos ...
- Winform GDI+ 相关资料
在Visual Studio 2010中定义GDI+自定义控件——自定义控件介绍 http://www.cnblogs.com/zhangdong/archive/2010/05/20/1740177 ...
- Android之设置横屏竖屏
方案一:在AndroidManifest.xml中配置 在项目的AndroidManifest.xml中找到你所指定的activity中加上Android:screenOrientation属性,它有 ...
- PHP实现CSV大文件数据导入到MYSQL数据库
<?php $db_host="192.168.1.10"; $db_user="root"; $db_psw="11111"; $d ...
- NSDate和NSString相互转换
一.NSDate转NSString //获取系统当前时间 NSDate *currentDate = [NSDate date]; //用于格式化NSDate对象 NSDateFormatter *d ...
- UILabel添加图片之富文本的简单应用
若想对UILabel添加图片,那么就需要使用NSMutableAttributedString来定义先定义一个普通的label UILabel *lab = [[UILabel alloc]initW ...
- [Notes] AWS Automation using script and AWS CLI
(c) 2014 Amazon Web Services, Inc. and its afflialtes, All rights reserved. The content in this file ...
- read函数返回值始终为1
部分程序如下: while(count=read(fd_s,buf,512)>0) printf("count=%d\n",count); write(f ...
- 如何使cookie全站都生效？
一个页面设置的cookie, 默认在其同级目录下,及子目录下可以读取. 如果想让cookie整站有效,可以在根目录下setcookie 也可以用第4个参数,来指定cookie生效路径 setcooki ...