锚点跳转过渡动画

jQuery实现

此技术非常简单。

  1. 像往常一样设置链接,
    例如: href =“#comments”(comments是目标的ID)

  2. 在link元素上添加一个class =“ scroll”属性,现在看起来像这样:

    1
    2
    3
    <a href="#comments" class="scroll">
    滚动到评论
    </a>
  3. 最后,在合适的位置添加以下jQuery代码:

    1
    2
    3
    4
    5
    6
    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进行以下修改:

1
$('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;

像这样使用它:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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(但它不支持移动端)

  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
载入天数...载入时分秒...

请我喝杯咖啡吧~

支付宝
微信