Question

Wordpress网站;我使用简单的代码和锚点将用户发送到页面顶部。

<body id="pg-top" <?php body_class(); ?> >

...

<a href="#pg-top">miss something?</a>

这会立即将用户直接发送到顶部。我希望用户自动“向上滚动”，以一定的速度向上发送页面。

我不确定我是否正确解释了这一点，但我已在许多网站上看到过这种情况。点击

逐渐滚动回页面顶部

Answer 1

您可以在超链接点击事件上使用jquery animate函数。

<a href="javascript:void(0);" onclick="scrolltop();">miss something?</a>

jquery的

<script>
  function scrolltop(){
    $("html, body").animate({scrollTop:0}, '500');
   }
</script>

您可以通过更改持续时间参数来更改动画速度。在我的代码中，它是500。

Answer 2

这是将click事件处理程序委派给具有.scroll-top的所有元素的一种方法。您可以将它与链接一起使用，也可以与所有其他元素一起使由于事件委派，这也适用于稍后由其他脚本动态添加的元素。

$('body').on('click', '.scroll-top', function (e) {
    $('html, body').animate({ scrollTop: 0 }, 300); // Speed: 0.3 seconds
    e.preventDefault();
});

现在您可以将它附加到这些示例中的任何元素：

<a class="scroll-top" href="#">top</a>
<span class="scroll-top">top</span>
<h1 class="scroll-top">top</h1>

示例：https://jsfiddle.net/j1uct2z8/

锚链接 - 动画页面返回页面顶部

2 个答案: