一般的锚点，就是点击一个按钮或者其他元素可以实现定位效果，当然可以使用锚点实现，但是这个不够美观，没有平滑的动画过渡效果，下面就通过代码实例介绍一下利用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. loadrunner 编写socket脚本实例（附服务端实现）

    一.socket背景知识 这个咱就不废话了,网上一搜一大堆 二.本实例实现的功能 服务端接收客户端发送的字符串,并返回"5678succ"共8个字符 三.服务端实现(java代码) ...

  2. AFNetworking图片缓存问题

    AFNetworking网络库已经提供了很好的图片缓存机制,效率是比较高的,但是我发现没有直接提供清除缓存的功能,可项目通常都需要添加 清除功能的功能,因此,在这里我以UIImageView+AFNe ...

  3. 1 Two Sum

    // Java public int[] twoSum(int[] nums, int target) { int[] answer = new int[2]; for (int i = 0; i & ...

  4. PDFsharp Samples

    http://www.pdfsharp.net/wiki/PDFsharpSamples.ashx http://www.pdfsharp.net/?AspxAutoDetectCookieSuppo ...

  5. 嗯，开通blog了！

    应老师建议,开通博客,“把学习时遇到的疑惑和问题随时用blog记录下来”,“把前期的学习心得写上,有时间最好把自己的学习计划也写上”. 用博客记录自己Linux和其他技术的学习日记,记录下学习实践中遇 ...

  6. Brainstorm-the walkthrough example: Image Classification

    (1) 运行create data,其中包括下载cifar10,并转换为hdf5格式(详见百度百科:http://baike.baidu.com/view/771949.htm#4_2): cifar ...

  7. .NET HttpClient扩展

    /// <summary> /// HttpClient扩展类 /// </summary> public static class HttpClientExtensions ...

  8. 互联网商业模式O2O、C2C、B2B、B2C等介绍

    O2O是online to offline分为四种运营模式: 1.online to offline是线上交易到线下消费体验 2.offline to online是线下营销到线上交易 3.offli ...

  9. Docker-2:network containers

    docker run -d -P --name web training/webapp python app.py # -name means give the to-be-run container ...

  10. 云存储的那些事（2）——数据分布算法CRUSH

    在分布式系统中,数据最终还是要存储到物理设备上的,ceph的底层设备抽象角色是OSD,那么数据是如何被决定放在哪块OSD上的,答案就是CRUSH算法. 关键字:CRUSH.一致性hash.ceph数据 ...