锚点跳转过渡效果

最新推荐文章于 2023-05-27 01:36:39 发布

Abby Zhang

最新推荐文章于 2023-05-27 01:36:39 发布

阅读量1.3k

点赞数 2

分类专栏： Jquery 前端文章标签： html css javascript jquery css3

本文链接：https://blog.csdn.net/bigzhangmin/article/details/105070833

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Jquery

1 篇文章 0 订阅

订阅专栏

jQuery实现

此技术非常简单。

像往常一样设置链接，
例如: href =“＃comments”（comments是目标的ID）
在link元素上添加一个class =“ scroll”属性，现在看起来像这样：
```
<a href="#comments" class="scroll">
    滚动到评论
</a>
```

最后，在合适的位置添加以下jQuery代码：

jQuery(document).ready(function($) {
	$(".scroll").click(function(event){		
		event.preventDefault();
		$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
	});
});

为了方便，$(’.scroll’) 选择器可以使用 $(‘a[href*=#]’)，并且多个元素间可以用逗号隔开 $(‘a[href*=#]’,‘a[href*=#]’)。

这就是全部🙂

实施此脚本的一个常见错误是为目标使用“命名锚”，而不是目标元素上的id属性。如果由于某种原因（例如，由于所见即所得的限制）而被命名锚定卡住，则可以尝试从Giles进行以下修改：

$('html,body').animate({scrollTop:$('[name="'+this.hash.substring(1)+'"]').offset().top}, 500);

参考链接：http://www.sycha.com/jquery-smooth-scrolling-internal-anchor-links

scroll-behavior属性(不建议)

如果您不介意不支持所有主流浏览器（仅Firefox 36 +，Chrome 61+和Opera 48+），请使用锚点链接和此单个属性作为滚动容器：

scroll-behavior: smooth;

像这样使用它：

<head>
  <style type="text/css">
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>
<body id="body">
  <a href="#foo">Go to foo!</a>

  <!-- Some content -->

  <div id="foo">That's foo.</div>
  <a href="#body">Back to top</a>
</body>

示例：垂直滚动、斜向滚动、演示Demo（但它不支持移动端）

Abby Zhang

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
锚点跳转过渡效果

锚点跳转过渡动画jQuery实现此技术非常简单。像往常一样设置链接，例如: href =“＃comments”（comments是目标的ID）在link元素上添加一个class =“ scroll”属性，现在看起来像这样：<a href="#comments" class="scroll"> 滚动到评论</a>最后，在合适的位置添加以下...
复制链接

扫一扫