返回顶部锚链接的偏移量

Question

我正在使用 wordpress 并且我想创建一个滚动到顶部按钮，所以我将此代码添加到我网站的 header 小部件区域中的 HTML 小部件中：

 <div id="top"></div> <style>html { scroll-behavior: smooth; }</style>`

然后我将此自定义菜单项添加到页脚菜单： #top 。 滚动效果很好，只是它不会滚动到页面的最顶部。 但在我的情况下，我有一个社交图标 header 而不是粘性 header，请参见截图： https://ibb.co/NFsgJ1H 有人可以帮我添加可以滚动到此 header 顶部的代码吗？ 先感谢您。

Answer 1

您可以尝试使用 javascript 之类的东西。 这个可以参考这个文档

 const toTop = document.getElementById('toTop'); toTop.onclick = () => { window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); }

 <button id="toTop">Go To Top</button>

要在 wordpress 中包含该代码，您可以将其添加到您的函数中。php

add_action('wp_footer', 'add_go_to_top');
function add_go_to_top()
{
   ?>
<script>
window.onload = () => {
    // add above javascript here
}
</script>
   <?php
}

Answer 2

我现在有一个做滚动偏移的插件，这就是我问这个问题的原因，我试图摆脱它，因为它可以以更有效的方式完成。 无论如何，此插件的 JS 文件中有此代码。 当我删除它时，它不会影响平滑滚动和滚动偏移。

    app.scroll = function( scrollTo ) {
    app.$html_and_body.stop().animate({
        'scrollTop': scrollTo // scroll and offset
    }, 900, 'swing', function( evt ) {
        app.initialScroll = app.isScrolling = false;
        app.$html_and_body.trigger( 'hash_link_scroll_offset.complete', evt );
    } );

我还在插件的 php 文件中找到了这段代码，当我删除它时，平滑滚动和滚动偏移停止，所以也许我们可以以某种方式组合代码并使用它：

public function enqueue_js() {
    $min = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
    wp_enqueue_script( 'hash_link_scroll_offset', self::$url . "assets/js/hash-link-scroll-offset$min.js", array( 'jquery' ), self::VERSION, true );
    wp_localize_script( 'hash_link_scroll_offset', 'hlso_offset', array( 'offset' => get_option( 'hash_link_scroll_offset', 0 ) ) );
}

Answer 3

我应该输入 JS 代码吗？ 如果我将代码更改为这样的代码，它会起作用吗：，而不是函数中的代码。php 我将保留#top 菜单项？

 const toTop = document.getElementById('toTop'); toTop.onclick = () => { window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); }

 <div id="top"></div>