停用平滑滚动元素答案

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

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

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

提前感谢您的帮助。

【问题讨论】：

标签： javascript php html css wordpress

【解决方案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'){return}elementorFrontend.on('components:init',function(){elementorFrontend.utils.anchors.setSettings('selectors.targets','.dummy-selector')})});" );
} );

安装和激活代码片段插件
WP Admin > Code Snippets > Add New 并插入一个标题，例如disable elementor smooth scroll
将上面的代码直接粘贴到编辑器中。
将 sn-p 设置为仅在前端运行
保存并激活 sn-p

使用 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>

WP 管理员 > Elementor > 自定义代码
新增并插入标题，例如disable elementor smooth scroll
将上面的代码直接粘贴到编辑器中。
将Location 设置为<body> - End（这是代码编辑器上方的下拉菜单）
将Priority 设置为10（也是代码编辑器上方的下拉菜单）- 没有必要，但我认为没有理由在其他脚本之前加载此文件
发布时将默认 Condition 设置为 Entire Site 或设置为您需要的任何条件。

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

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

安装并激活选择的自定义 JS 插件。
创建一个新的脚本项。
使用此答案的 选项 2 中的 JS 代码添加脚本块 - 根据您的插件，您可能需要也可能不需要脚本标签。
保存（并可能激活）它。您可能需要设置优先级，使其在 Elementor 之后加载。

使用子主题的选项 4

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

一如既往，清除缓存

完成上述任何步骤并进行测试后，如果您使用任何本地缓存插件，请将其清除。如果您使用 Cloudflare 或 CDN，请将其清除。

信用

@jamesckemp's awesome solution to disable Elementor smooth scroll on github

【讨论】：