当前位置: 首页 > 编程笔记 >

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

焦驰
2023-03-14
本文向大家介绍jQuery实现页面内锚点平滑跳转特效的方法总结,包括了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
});

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

 类似资料:
  • 问题内容: 有没有一种方法可以使用jQuery向下滚动到锚链接? 喜欢: ? 问题答案: 这是我的方法: 然后,您只需要像这样创建锚:

  • 本文向大家介绍jquery 仿锚点跳转到页面指定位置的实例,包括了jquery 仿锚点跳转到页面指定位置的实例的使用技巧和注意事项,需要的朋友参考一下 js 仿锚点跳转到页面指定位置,用的是 offset() 方法 jQuery: offset(): 获取匹配元素在当前视口的相对偏移。 返回的对象包含两个整型属性:top 和 left。此方法只对可见元素有效。 position(): 获取匹配元素

  • 我对jQuery移动锚有问题。当我点击带有某个锚的_blank链接时,我会重定向到新选项卡中的新页面并导航到锚链接。但是当页面完全加载时,页面跳转到页面顶部

  • 本文向大家介绍Javascript页面跳转常见实现方式汇总,包括了Javascript页面跳转常见实现方式汇总的使用技巧和注意事项,需要的朋友参考一下 本文实例总结了Javascript页面跳转常见实现方式。分享给大家供大家参考,具体如下: 概述 相信很多Web开发者都知道,在开发Web程序的时候,对于页面之间的跳转,有很多种,但是有效的跳转则事半功倍,下面就是我在平时的开发过程中所用到的一些Ja

  • 我需要一些帮助如何保持保持当前锚链接活动后刷新页面。实际上,我有这个垂直的navbar菜单(http://prntscr.com/fz9yct),默认情况下,我将类active添加到中,所以当我们打开页面时,navbar看起来就像您在屏幕截图中看到的那样。 当我滚动,或单击任何其他navbar列表项,一切工作良好,平滑滚动到适当的部分,并删除类活动从上一个锚链接,并添加到适当的。 问题是当我刷新p

  • 本文向大家介绍Spring boot 跳转到jsp页面的实现方法,包括了Spring boot 跳转到jsp页面的实现方法的使用技巧和注意事项,需要的朋友参考一下 本人正在学习Spring boot,搜索了很多关于Spring boot 跳转到jsp页面的实现方法介绍,下面我来记录一下,有需要了解的朋友可参考。希望此文章对各位有所帮助。 @Controller注解 1、application.pr