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

    如何通过本地的代码,调用远程的server呢?   例如:我有两台电脑A(192.168.112.10)和B(192.168.112.11),那我怎么能在A执行本地脚本,但是使用B上的server呢? ...

  2. python Day01

    Python Day01 Python 简介 介绍 Python 是一种面向对象.直译式的计算机程序设计语言,也是一种功能强大的通用型语言,已经有将近二十年的发展历史,成熟稳定.包含了一组完善而且容易 ...

  3. debug命令简介

    debug命令不区分大小,debug的命令都是一个字母,后跟或不跟参数 1.debug [路径\文件] [参数] [参数]--[参数] debug相应程序 2. D(Dump) [地址] [范围] 显 ...

  4. thinkphp model模块

    1.获取系统常量信息的方法:在控制器DengLuController里面下写入下面的方法,然后调用该方法. public function test() { //echo "这是测试的&qu ...

  5. .style, .getComputedStyle(),.currentStyle区别

    1)style只能获取行间样式(写在标签里面的):能读能写 2)currentStyle是专属ie的属性,区别他返回的是最终样式 及包括行间和外链css 3)getComputedStyle是一个可以 ...

  6. 初步涉及JDBC

    一.为什么要使用JDBC: 1.在之前的学习中,我们都是通过控制台来输入信息,创建对象,然后再输出信息,但是这样无法保存数据,每次程序运行都需要重新输入,很麻烦. 2. 在这样的情况下,我们就需要利用 ...

  7. jqueyr获取动态创建的元素

    javascript代码是按照代码顺序执行的,所以如果你用某个元素的click事件创建一个元素,id为test,然后在下面$("#test")是无法选择到的. 正确的方法是将在cl ...

  8. Xcode7以后 使用空模板

    Xcode7以后的版本没有空模板可以选择 习惯使用空模版的 可以自己拷贝空模版文件夹 放到模版的位置 重启就可以使用了 1:首先 需要有一个空模版 没有空模板的可以在下面路径下下载一个 并解压 htt ...

  9. Winform打砖块游戏制作step by step第6节---双缓冲应用

    一 引子 为了让更多的编程初学者,轻松愉快地掌握面向对象的思考方法,对象继承和多态的妙用,故推出此系列随笔,还望大家多多支持. 二 本节内容---双缓冲应用 1.  主界面截图如下: 2.  什么是双 ...

  10. 我开发的SNMP编译器和浏览器

    我开发的SNMP编译器和浏览器 什么是SNMP SNMP(Simple Network Management Protocol,简单网络管理协议)的前身是简单网关监控协议(SGMP),用来对通信线路进 ...