jQuery实现页面内锚点平滑跳转特效的方法总结

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现页面内锚点平滑跳转</title><base target="_blank" />
<style type="text/css">
#hovertree {
height: 800px;
background: red;
text-align:center;color:white;
} 

#keleyi {
height: 800px;
background: green;text-align:center;color:white;
} 

#myslider {
height: 800px;
background: black;text-align:center;color:white;
} 

#zonemenu {
height: 800px;
background: yellow;text-align:center;
} 

.keleyilink{position:fixed;}
.keleyilink a {text-decoration:none;}
</style>
</head>
<body>
<div class="keleyilink">
<a href="javascript:scroll('hovertree');" target="_self">HoverTree</a>
<a href="javascript:scroll('keleyi');" target="_self">KKK</a>
<a href="javascript:scroll('myslider');" target="_self">myslider</a>
<a href="javascript:scroll('zonemenu');" target="_self">ZoneMenu</a>
</div>
<div id="hovertree">hovertree
<br /><br /><br /><a href="">原文</a> <a href="">JJJ</a> <a href="http://hovertree.com">HoverTree</a> <a href="/">特效库</a>
</div>
<div id="keleyi">jb51</div>
<div id="myslider">myslider</div>
<div id="zonemenu">zonemenu</div>
<script src="jquery/jquery-1.11.3.min.js"></script>
<script src="jquery.hovertreescroll.js"></script>
<script>
function scroll(id) {
$("#" + id).HoverTreeScroll(1000);
}
</script>
</body>
</html>

更简单点的实现方法：

代码只有一句话

代码如下:

$("html,body").animate({scrollTop: $("#elementid").offset().top}, 1000);

animate()方法用来实现一组css的自定义动画，有两种调用方法

第一种形式接受4个参数，如下所示

.animate( properties [, duration] [, easing] [, complete] )

properties – 一个包含样式属性及值的映射
duration – 可选的速度参数，既可以是预置的字符串，也可以是一个毫秒数值
easing – 可选的缓动类型，jquery默认的只有两种：swing和linear,要使用其它效果需要安装缓动类的插件
complete – 可选的回调函数，在动画结束时被调用

第一种形式的示例如下

.animate({property1: 'value1', property2: 'value2'},
    speed, easing, function() {
      alert('The animation is finished.');
    });

本文实现锚点跳转的代码使用了第一种形式

$("html,body")代表对html或body元素进行动画，即要改变他们的css属性值
scrollTop是要改变的属性值，表示滚动条滑过的距离，在这里表示向下拉动浏览器滚动条后html（body)被浏览器顶端隐藏的高度
$("#elementid").offset().top就是html（body)需要被浏览器顶端隐藏的高度，它代表id为elementid的元素顶端到网页顶端（不是浏览器可视区域顶端）的绝对距离。
1000是指动画时间为1秒

animate()方法还有第二种调用形式

.animate( properties, options )

一个是属性映射，一个是选项映射。实际上这里的第二个参数是把第一种形式的第2-4个参数封装在另一个映射中，同时又添加了两个选项。第二种形式的代码如下：

.animate({
  property1: 'value1',
  property2: 'value2'
}, {
  duration: 'value',
  easing: 'value',
  complete: function(){
    alert('The animation is finished.');
  },
  queue: boolen,
  step: callback
});

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • JQuery 实现在同一页面锚点链接之间的平滑滚动

    web开发前端一直用JQuery ,真正接触了才体会到,JQuery 原来比我想象的要强大的多,也可能比我体会到的还要强大的多,特别是兼容性那个好,于是把一些好玩的,酷炫的,可以代替 JS 的,统统给用上了. 从 JQuery 引入今天的正题,用 JQuery 实现锚点链接之间的平滑滚动.以前介绍过一个用 JS 实现的页面锚点跳转缓冲特效,效果相当不错,可以在同一页面的锚点链接之间实现平滑的滚动,但是 JS 代码相对来说比较冗长,现在好了,只要已经加载了 JQuery,我们就可以用较为简短的代码

  • JQuery简单实现锚点链接的平滑滚动

    一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现这个效果: 比如,这里我们将通过点击<a>标签跳转到 id为content的指定位置那里. <a id="turnToContent" href="#content"></a> 然后呢,就在我们想要的位置设置id为content的内容块,这里用一个div模拟一篇不像文章的文章.最好将此d

  • jQuery实现锚点向下平滑滚动特效示例

    jQuery实现锚点向下平滑滚动特效示例

    实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ window.location.hash = hash; }); 简单实例代码: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.

  • jQuery实现平滑滚动页面到指定锚点链接的方法

    本文实例讲述了jQuery实现平滑滚动页面到指定锚点链接的方法.分享给大家供大家参考.具体如下: $.fn.scroller = function() { var speed = 'slow'; // Choose default speed $(this).each(function() { $(this).bind('click', function() { var target = $(this).attr('href'); // Get scroll target $(target).S

  • jQuery实现平滑滚动到指定锚点的方法

    本文实例讲述了jQuery实现平滑滚动到指定锚点的方法.分享给大家供大家参考.具体如下: 定义好指定的anchor锚点,调用下面的js代码可以让页面平滑的滚动到指定的位置,非常实用,比如返回页面顶部,去往页面底部等功能 // HTML: // <h1 id="anchor">Lorem Ipsum</h1> // <p><a href="#anchor" class="topLink">Back t

  • jquery如何实现锚点链接之间的平滑滚动

    复制代码 代码如下: $('a[href*=#]').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name

  • jQuery实现页面内锚点平滑跳转特效的方法总结

    平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有"小尾巴",就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有"小尾巴". <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery实

  • 页面内锚点定位及跳转方法总结（推荐）

    接着上一篇,其实是一个功能,本来感觉挺简单的一个问题,没想到遇到两个坎儿,无语... 上一篇是关于scroll事件绑定的问题,这一篇的问题是:点击锚点跳转到相应DIV的问题. 最简单的方法是锚点用<a>标签,在href属性中写入DIV的id.如下: <!DOCTYPE html> <html> <head> <style> div { height: 800px; width: 400px; border: 2px solid black; }

  • jQuery实现分章节锚点“回到顶部”动画特效代码

    jQuery实现分章节锚点“回到顶部”动画特效代码

    本文实例讲述了jQuery实现分章节锚点"回到顶部"动画特效.分享给大家供大家参考,具体如下: 这里演示基于jquery实现的分章节动画实现"回到顶部"的效果,可通过 网页顶部的数字序号直接进入网页的章节,当处于第二章节的时候,网页右侧会显示竖排的控制按钮,点击按钮会回到相应章节,其实也就是定义好的锚点,当然也可回到顶部,网页上见到的回顶部大多不是这个样子,所以本款效果还挺新颖. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js

  • jQuery在页面加载时动态修改图片尺寸的方法

    本文实例讲述了jQuery在页面加载时动态修改图片尺寸的方法.分享给大家供大家参考.具体如下: $(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(this).width(); var height = $(

  • JavaScript实现同一页面内两个表单互相传值的方法

    JavaScript实现同一页面内两个表单互相传值的方法

    本文实例讲述了JavaScript实现同一页面内两个表单互相传值的方法.分享给大家供大家参考.具体如下: 有时候我们在提交表单的时候需要将两个表单的值互相传递,那么如何实现呢?其实很简单,就是用JavaScrip获取任一表单的值,然后赋给另一个,具体可看代码,代码很有意思,也很实用. 运行效果截图如下: 具体代码如下: <html> <head> <title>JavaScript同一页面两个表单互相传值</title> <meta http-equi

  • jQuery实现页面下拉100像素出现悬浮窗口的方法

    jQuery实现页面下拉100像素出现悬浮窗口的方法

    本文实例讲述了jQuery实现页面下拉100像素出现悬浮窗口的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

  • jquery实现多屏多图焦点图切换特效的方法

    本文实例讲述了jquery实现多屏多图焦点图切换特效的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

  • JS实现页面内跳转的简单代码

    使用js($.ajax中)实现页面内跳转(即:描点平滑跳转)的方法(aa为跳转目的标签的id): 在网络上有很多资料所说的:animate方法我试了并不好使,不知道是啥原因,欢迎大家指正,附上网络方法: var oneTop = $("#aa").offset().top; jQuery("html", "body").animate({ scrollTop: oneTop }, 0); 经过测试,如果不需要有滑动动画的话,可使用下面的语句: l

  • 用Javascript实现锚点(Anchor)间平滑跳转

    锚点(Anchor)相信很多人都不陌生,它方便访问者在页面的不同位置快速跳转,直接找到自己感兴趣的内容,如果说 RSS 是整个网站的摘要,那锚点就是一个页面的摘要,通常一个页面内容很多的时候,都会用锚点来定位. 但是锚点也有个问题,通常点击锚点后,页面会立即跳到目标位置,而本文介绍的方法,实现了锚点(Anchor)间平滑跳转,效果非常不错. 复制代码 代码如下: <script type="text/javascript"> // 说明 :用 Javascript 实现锚点

  • AngularJS实现单一页面内设置跳转路由的方法

    本文实例讲述了AngularJS实现单一页面内设置跳转路由的方法.分享给大家供大家参考,具体如下: 单一页面内设置跳转路由 鉴于现在很多应用的应用功能以及场景都非常简单,如果还按照以前的思路,每个页面做一个html,通过路由进行跳转,不仅在时间上会有延迟,在某些特殊的浏览器(最典型的如微信内置浏览器)中,跳转过程中会出现短暂的白页. 因此,我们在开发过程中,将页面逻辑封装到同一个html中.当系统第一次加载页面时,将所有页面全部加载进去,然后通过angularJS内置的路由进行加载. 直接上代码

随机推荐