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

    1.安装node(windows环境) 进入node官网https://nodejs.org/en/下载好后直接安装就可以了.安装完成之后可以在命令窗口查看安装的版本 2.安装npm express ...

  2. java基础快捷键（1）

    1)  输出快捷键:System.out.println():在键盘上输入  Syso  然后按  Alt + ?:就出来了:System.out.println(); 2)主方法:(main): 快 ...

  3. angularjs（二）模板终常用的指令的使用方法

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

  4. 在JSP中使用JavaBean

    //创建一个PersonBean类 public class PersonBean {    private String name;    private int age;    public Pe ...

  5. NFS实践练习

    实践要求: (CentOS 7)两台主机A/B,其中A主机搭建LAMP环境,B主机当做NFS服务器存放Mariadb的数据,并部署Discuz做测试,实现数据库可用. A主机:httpd2.4 php ...

  6. 通过XmlHttpRequest实现带进度条异步下载文件

    本博文源自技术群的讨论,因为网上找不到实现这样效果的的代码,而我说没问题,可以实现,因此有人质疑我是否能做到,呵呵,现将我实现代码贴出如下,希望有兴趣的同学可以继续完善: 本代码仅做技术展现,请勿探讨 ...

  7. REORG TABLE命令优化数据库性能

    [转]DB2日常维护——REORG TABLE命令优化数据库性能     一个完整的日常维护规范可以帮助 DBA 理顺每天需要的操作,以便更好的监控和维护数据库,保证数据库的正常.安全.高效运行,防止 ...

  8. .net WebClient发送请求实例：

    public static Main(string [] ager) { WebClient client = new WebClient(); client.Headers.Clear(); cli ...

  9. servlet的session为null？

    servlet的session(会话)显示为null,一般是web.xml中配置不对或者在浏览器输入的url不正确造成的. web.xml配置如下: <servlet> <servl ...

  10. 一般html5 手机端头部需要

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...