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

前端技术 2023/09/09 JavaScript

平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 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\">phpstudy</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
});

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

本文地址：https://www.stayed.cn/item/26148

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案