返回顶部锚链接的偏移量答案

【问题标题】：offset for back to top anchor link返回顶部锚链接的偏移量
【发布时间】：2020-08-04 17:39:56
【问题描述】：

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

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

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

【问题讨论】：

标签： html wordpress animation offset scrolltop

【解决方案1】：

我现在有一个做滚动偏移的插件，这就是我问这个问题的原因，我试图摆脱它，因为它可以以更有效的方式完成。无论如何，此插件的 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 ) ) );
}

【讨论】：

【解决方案2】：

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

const toTop = document.getElementById('toTop');

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

&lt;div id="top"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

您可以尝试使用类似这样的javascript。这个可以参考document这个

const toTop = document.getElementById('toTop');

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

&lt;button id="toTop"&gt;Go To Top&lt;/button&gt;

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

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

【讨论】：

但是您是否建议添加此代码，我应该如何在页脚菜单中链接到它？这可以在 HTML 或 css 中完成吗？
您可以使用 wp_enqueu_script 插入此代码。然后使用 add_action('wp_footer', 'your_callback') 添加按钮
wp_enqueue_script 文件在哪里？
好的，它将按钮添加到页脚，但是当您单击它时，它什么也不做。但我正在考虑滚动到顶部按钮的相同设计，不是作为按钮而是作为菜单项，与页脚菜单对齐。我只是问是否有可以添加到 HTML 小部件的 HTML 代码，这将使滚动更高一点，或者直到标题结束？
我改变了答案，然后你可以在你的footer.php中添加你的按钮，并确保它的id属性是“toTop”。谢谢