滚动到顶部脚本在 Bootstrap 4 中不起作用答案

【问题标题】：Scroll to Top script doesn't work in Bootstrap 4滚动到顶部脚本在 Bootstrap 4 中不起作用
【发布时间】：2018-06-15 09:18:26
【问题描述】：

我向我的网站（使用 Bootstrap 4 开发）添加了滚动到顶部脚本，但它不起作用。然而，这个脚本在使用 Bootstrap 3 开发的同一个网站上工作。我认为引导版本发生了错误，但不幸的是我找不到问题。

<div class="toTop">
  <a href="#"><i class="icon-arrow-up icons"></i></a>
</div>

$('.toTop').on('click', function(event) {
  event.preventDefault();
  $('html, body').animate({ scrollTop: 0 }, 'slow');         
});

控制台日志：

JQMIGRATE: Migrate is installed, version 1.4.1
smooth.js:2 Uncaught TypeError: $ is not a function
    at smooth.js:2
(anonymous) @ smooth.js:2

【问题讨论】：

在点击处理程序中添加console.log() 以检查它是否被调用
日志是：JQMIGRATE: Migrate 已安装，版本 1.4.1 smooth.js:2 Uncaught TypeError: $ is not a function at smooth.js:2 (anonymous) @smooth.js:2
你应该使用完整版的jquery code.jquery.com/jquery-3.1.0.js
@proofzy 好答案。我忘了 BS4 使用 jQuery slim
嗨，Rory，jQuerry 是通过 // 包含自定义 jQuery 函数 shapeSpace_include_custom_jquery() { wp_deregister_script('jquery'); wp_enqueue_script('jquery', 'ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js', array(), null, true); } 我的functions.php文件中的函数

标签： javascript jquery html twitter-bootstrap bootstrap-4

【解决方案1】：

我已经包含了 Bootstrap 4 和完整的 jQuery 3.3.1，它运行良好。也许你有一个多余的代码，这会让你出错。

您的 jQuery 脚本运行良好：

$('.toTop').on('click', function(event) {
  event.preventDefault();
  $('html, body').animate({ scrollTop: 0 }, 'slow');         
});

我为你做了一个简单的JSfiddle。

注意：Bootstrap 4 使用 jQuery slim，但也支持完整的 jQuery。对于您的示例，您应该使用 full jQuery。

【讨论】：

谢谢，但在我的情况下，jQuery 不是从页脚下方的脚本加载，而是通过 functions.php（这是基于 Wordpress 的网站）加载。如果我将 jQuery 加载脚本放在页脚下方，一切都很好。但是如果你从functions.php 加载jQuery，脚本就不起作用了。
@Morgari 查找其中包含的 jQuery 版本并提供详细信息
那里是3.1.1版本
@Morgari 好的，我选择了 jQuery 版本 3.1.1。一切正常。再次尝试使用我的 jsfiddle.. imgur.com/a/3nCvrde
谢谢。我会再写一次：在我的例子中，jQuery 不是从页脚下方的脚本加载，而是通过 functions.php（这是基于 Wordpress 的网站）加载。如果我将 jQuery 加载脚本放在页脚下方，一切都很好。但是如果你从functions.php 加载jQuery，脚本就不起作用。所以是的，jQ v3.1.1 一切都很好，但我对从 functions.php 加载的 jQuery 有问题

【解决方案2】：

<div class="toTop" onclick="gotoTop()">BACK TO TOP<div class="icon-arrow-up icons"></div></div>

function gotoTop() {
   $('html, body').animate({scrollTop:0},'fast');
}

试试这个..

【讨论】：

只需在浏览器控制台中点击 gotoTop 函数定义，看看，这肯定会工作。
这在我的情况下不起作用 - 当您通过 functions.php 加载 jQuery 时

【解决方案3】：

WordPress 以所谓的“无冲突模式”加载自己的 jQuery 库，并且定义 jQuery 的 $ 选择器或变量不适用于 WordPress 加载的 jQuery 版本，因此它必须表达得更像这样......

jQuery(document).ready(function($){

// Code goes here


});

这里我们在文档准备函数的开头使用 jQuery，然后将其传递或绑定到 $ 选择器，所以现在代码中的其他任何地方都可以使用 $ 选择器。

https://wpbeaches.com/jquery-document-ready-function-for-wordpress/

【讨论】：

请应用 Stackoverflow 编辑器中可用的合适代码格式选项。