【问题标题】: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”。谢谢
        猜你喜欢
        • 1970-01-01
        • 2016-09-27
        • 2020-03-02
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2023-01-12
        • 1970-01-01
        相关资源
        最近更新 更多