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

    今天一个SHOPNC商城突然变慢,查看服务器情况,发现MYSQL占用181%CPU,然后查看PHP慢查询,发现这样的内容 [22-Nov-2016 20:55:41] [pool www] pid 5 ...

  2. 【Python全栈笔记】03 [模块二] 16-17 Oct 函数

    定义一个函数 def function_name(形式参数): 代码块 return 'Value' #如果没有写return,则默认返回None # 一个函数到return这一行就结束执行了,在re ...

  3. C# WebBrowser 网页缩放的方法

    1.引用COM:MicroSoft Internet Controls 2. 核心代码如下: private void button2_Click(object sender, EventArgs e ...

  4. python中的时间转换

    Python中的时间相关库有: datetime 和time. 主要形式有: datetime timestamp 相互转换: timestamp->datetime: dt = datetim ...

  5. CoordinatorLayout+TabLayout+ViewPager

    <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.C ...

  6. wini -- FileSubmitByFTP

    // winFtpPutFiles.cpp : Defines the entry point for the console application.// #include "stdafx ...

  7. Java（异常处理）动手动脑

    1>请阅读并运行AboutException.java示例,然后通过后面的几页PPT了解Java中实现异常处理的基础知识. import javax.swing.*; class AboutEx ...

  8. IP首部校验和计算

    根据RFC1071文档的计算方法,编写代码实现IP首部校验和的计算 计算步骤: 1.首先将IP首部中校验和字段置0 2.将IP首部每16bit进行相加,如果有进位产生,则将进位加到最低位. 3.将计算 ...

  9. Kinect2在线重建（Tracking and Mapping）

    前言      个人理解错误的地方还请不吝赐教,转载请标明出处,内容如有改动更新,请看原博:http://www.cnblogs.com/hitcm/      如有任何问题,feel free to ...

  10. flask-admin章节四：flask session的使用

    1. 关于session flask session可能很多人根本都没有使用过,倒是cookie大家可能使用得比较多.flask cookie使用起来比较简单,就两个函数,读取和设置. 具体使用方式如 ...