锚链接 - 动画页面回到页面顶部答案

【问题标题】：anchor link - animating page back to page top锚链接 - 动画页面回到页面顶部
【发布时间】：2015-05-31 06:37:18
【问题描述】：

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

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

...

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

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

不确定我是否正确解释了这一点，但我在许多网站上都看到过。点击后逐渐滚动回到页面顶部

【问题讨论】：

smooth scroll with javascript onclick的可能重复

标签： javascript jquery html css wordpress

【解决方案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。

【讨论】：

只是出于好奇，为什么javascript:void(0) 而不是经典的#？
@D4V1D 如果我们使用#，它还会在网址中添加#。 javascript:void(0) 不会在 url 中添加任何额外的参数
@user3550879 您可以在页面中标签之间的任何位置添加此功能。我对wordpress没有太多想法。但这是简单的 javascript 函数。您可以在页面中添加 aneware。或在页眉或页脚中。
在我的标签之间添加了它，但没有骰子？
我正在动态引入查询，并且在

【解决方案2】：

这是一种将点击事件处理程序委托给所有具有.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/

【讨论】：

可以写成一个函数，我可以把它放在我的页面中，用 php 或
是的。只需将其放在<script> 和</script> 之间即可。它是 Javascript/jQuery，与 PHP 无关。
好吧，它把人们带回了顶部，但动画似乎不起作用，我把它放在我的标签中
确保在该代码之前加载 jQuery。这是一个工作示例：jsfiddle.net/j1uct2z8
是不是基于特定的jQuery，我是通过wordless动态引入的。它检查并引入最新的 jQuery.js