一般的锚点，就是点击一个按钮或者其他元素可以实现定位效果，当然可以使用锚点实现，但是这个不够美观，没有平滑的动画过渡效果，下面就通过代码实例介绍一下利用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实现锚点平滑定位的更多相关文章

  1. JQuery实现锚点平滑滚动

    一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现这个效果: 比如,这里我们将通过点击<a> ...

  2. jQuery实现锚点滑动定位

    go=function(index){ var top = $('#caseNewGuide' + index).offset().top; $('html, body').animate({ scr ...

  3. vue2.0模拟锚点实现定位平滑滚动

    vue2.0模拟锚点实现定位平滑滚动 效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...

  4. jQuery实现页面内锚点平滑跳转

    平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...

  5. 【前端】jQuery实现锚点向下平滑滚动特效

    jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...

  6. jQuery实现页内锚点平滑跳转

    当页面内容长多,导致页面高度过高或过宽是,浏览起来就有点费劲,不过使用了锚点平滑跳转效果可以实现页面的跳转,从而加快速浏览想要浏览的模块.具体做法如下: 首先是菜单(锚点)的写法 <a href ...

  7. jQuery制作顶部与左侧锚点板块定位功能带动画跳转特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js 平滑定位

    <script type="text/javascript"> function intval(v){ v = parseInt(v); return isNaN(v) ...

  9. URL锚点HTML定位技术机制

    一.锚点是什么 锚点就等同于火影中的“飞雷神之术”,我们先看百科中锚点的解释: 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部.然后可以创建到这些命名锚记的链接,这些链接可快 ...

随机推荐

  1. 关于js原型继承

    js的每个类都有一个prototype对象 访问对象的属性时,会先访问到对象自身是否有定义这个属性 如果没有定义,就会去访问对象所属类型的prototype对象是否有此属性 原型继承就是把类型的pro ...

  2. hdu 1387（Team Queue） STL

    Team Queue Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  3. DataInputStream和DataOutputStream

    import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.ByteArrayInp ...

  4. AFN中的PATCH 和 DELETE 请求方式

    - (nullable NSURLSessionDataTask *)PATCH:(NSString *)URLString parameters:(nullable id)parameters su ...

  5. linux中的chage命令

    在LINUX系统上,密码时效是通过chage命令来管理的. 参数说明:-m 过多少天后可修改密码.为0时代表任何时候都可以更改密码.-M 过多少天后密码过期.-W 用户密码到期前,提前收到警告信息的天 ...

  6. Visual studio 生成事件的使用 、xcopy 实现 dll 复制操作、

    IF NOT "$(ConfigurationName)"=="publish" exit /B 0if not exist $(TargetPath)publ ...

  7. sublime插件@sublimelinter安装使用

    sublimelinter插件是一款sublime编辑器的代码校验插件,支持多种语言,对于前端来说主要包含css和js校验. 要是用这款插件 1)安装node,然后在全局安装jshint(npm in ...

  8. 用clock（）函数计算多项式的运行时间

    百度百科中定义clock():clock()是C/C++中的计时函数,而与其相关的数据类型是clock_t.在MSDN中,查得对clock函数定义如下: clock_t clock(void) ; 简 ...

  9. 【如何快速的开发一个完整的iOS直播app】(美颜篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,美颜功能是很重 ...

  10. Linux系统编程重要细节记录(持续更新中)

    1.在打印rlim_t值时,需要将其转换为long long并使用%lld printf()修饰符.