Question

我在我的网站（使用Bootstrap 4开发）中添加了一个顶部脚本的滚动，但它不起作用。但是，这个脚本在使用Bootstrap 3开发的同一个网站上工作。我认为bootstrap版本出现了错误，但遗憾的是我无法找到问题。

<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

Answer 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。对于您的示例，您应该使用完整的jQuery 。

Answer 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');
}

试试这个..

Answer 3

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

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

// Code goes here


});

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

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

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

3 个答案: