停用平滑滚动元素

Posted 2023-02-19

技术标签:

【中文标题】停用平滑滚动元素【英文标题】：Deactivate smooth scrolling elementor 【发布时间】：2021-02-12 18:09:21 【问题描述】：

我已经在一个设置了锚链接的页面中创建了一个网站。当我单击菜单联系人项目时，它会平滑地向下滚动到“联系人”部分。我想删除平滑滚动效果并直接重定向到该部分，而不是慢慢滚动到页面底部。

我将 elementor builder 与 wordpress 一起使用。有没有可以去掉平滑滚动的jquery函数或者css代码？

提前感谢您的帮助。

【问题讨论】：

【参考方案1】：

不幸的是，Elementor 没有简单的方法来删除这个选项。

但是，有一些方法可以解决它。我过去所做的只是简单地使用 html Widget 而不是锚点小部件。

基本上，将 HTML Widget 放在您需要用户点击链接后到达的位置，然后手动添加一个表示锚点的空 div，如下所示：

<div id="no-smooth-scroll"></div>

您的链接：#no-smooth-scroll 现在应该将您的用户带到没有平滑滚动选项的 div 所在的位置。

刚刚测试了这个解决方法以确保它仍然有效，并且它在我的网站上也有效。

希望它对你有用！

【讨论】：

【参考方案2】：

Elementor 中没有禁用平滑滚动的 UI 选项，但当然可以使用下面的选项禁用它（使用 Elementor JS Hooks）。

选项 1 使用 Code Snippets plugin - 可以说是最好的方法，因为它不需要 Elementor Pro，而且它确保在脚本运行之前加载 Elementor。

复制这个 - 你将在第 3 步中使用它

// add inline script to disable elementor smooth scroll
add_action( 'wp_enqueue_scripts', function() 
   wp_add_inline_script( 'elementor-frontend', "jQuery(window).on('elementor/frontend/init',function()if(typeof elementorFrontend==='undefined')returnelementorFrontend.on('components:init',function()elementorFrontend.utils.anchors.setSettings('selectors.targets','.dummy-selector')));" );
 );

disable elementor smooth scroll

使用 Elementor Pro 的选项 2

复制这个 - 您将在第 3 步中使用它。

<script defer>
jQuery( window ).on( 'elementor/frontend/init', function() 
    if ( typeof elementorFrontend === 'undefined' ) 
        return;
    

    elementorFrontend.on( 'components:init', function() 
        elementorFrontend.utils.anchors.setSettings( 'selectors.targets', '.dummy-selector' );
     );
 );
</script>

disable elementor smooth scroll

Location

<body> - End

Priority

10

Condition

Entire Site

选项 3 使用自定义 JS 插件，例如 Simple Custom CSS and JS

注意：这些是一般指导 - 请按照插件文档进行准确实施。

选项 2

使用子主题的选项 4

如果你理解标题，那么你就是一个主题开发者，所以我会简单地说你可以将它添加到你的 functions.php 文件、模板文件中，或者添加 JS 代码（在<script>块) 到它自己的 .js 文件中，并根据需要包含它。