锚链接 - 动画页面返回页首

Wordpress网站;我使用简单的代码和锚点将用户发送到页面的顶部。锚链接 - 动画页面返回页首

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

... 

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

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

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

来源

2015-05-31 user3550879

的〔平滑滚动与JavaScript的onclick]（HTTP可能重复：// stackoverflow.com/questions/13016379/smooth-scroll-with-javascript-onclick） – D4V1D

你可以使用jquery animate函数进行超链接点击事件。

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

jQuery的

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

您可以通过改变时间参数改变动画速度。这里是我的代码，它是500。

来源

2015-05-31 06:40:10

这是您正在寻找的正确答案。 – D4V1D

可以这段代码进入我的functions.php？ – user3550879

出于好奇，为什么'javascript：void（0）'而不是经典的'＃'？ – D4V1D

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

来源

2015-05-31 06:52:22 Rudi

可以写成一个函数，我可以把我的网页，用php或'之间即可，它是Javascript/jQuery，与PHP无关。 – Rudi

好吧，它带人回到顶部，但动画似乎不起作用，我把它放在我的标签 – user3550879

锚链接 - 动画页面返回页首

回答

相关问题