停用平滑滚动元素或

Question

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

我正在将 elementor 构建器与 wordpress 一起使用。是否有 Jquery 函数或 CSS 代码可以消除平滑滚动？

预先感谢您的帮助。

Answer 1

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

选项 1 使用 Code Snippets 插件 - 可以说是最好的方法，因为它不需要 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 管理 > 代码片段 > 添加新内容并插入标题，例如
```
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>

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

选项 3 使用自定义 JS 插件，例如简单自定义 CSS 和 JS

注意：这些是一般说明 - 请遵循插件文档以获取准确的实现。

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

选项 4 使用子主题

如果您理解标题，那么您就是主题开发人员，所以我简单地说您可以将其添加到您的functions.php文件、模板文件中，或者添加JS代码（在

<script>

块内）到它自己的 .js 文件中，并按照您喜欢的方式包含它。

一如既往，清除缓存

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

信用

@jamesckemp 的 awesome 在 github 上禁用 Elementor 平滑滚动的解决方案

Answer 2

在我的 WordPress 网站中成功禁用平滑滚动的解决方案是在结束标记之前运行以下脚本。您可以使用您选择的注入器插件轻松添加此脚本：

<script>
  let inite = 0;
  let intervalId = setInterval(function() {
    if (document.readyState === "complete" && inite === 0) {
      document.documentElement.style.scrollBehavior = 'auto'; // Disable smooth scroll
      inite++; // Ensure the code runs only once
      clearInterval(intervalId); // Stop the interval once the code is executed
    }
  }, 500);
</script>

Answer 3

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

但是，有一些方法可以解决这个问题。我过去所做的就是简单地使用 HTML Widget 而不是锚点 widget。

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

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

您的链接：

#no-smooth-scroll

现在应该将您的用户带到 div 所在的位置，而无需平滑滚动选项。

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

希望它对你有用！

停用平滑滚动元素或

问题描述投票：0回答：3

3个回答

最新问题

停用平滑滚动元素或

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3