在 Bootstrap 4 中，Back-to-top 不再起作用
[英]Back-to-top is not working anymore in Bootstrap 4
问题描述
I am trying to implement a back-to-top button with js in bootstrap 4 using the fontawesome icon-set.
我正在尝试使用 fontawesome 图标集在 bootstrap 4 中实现一个带有 js 的返回顶部按钮。 A week ago it worked perfectly, but ever since I changed a few other things on the site it stopped working.一周前它运行良好，但自从我在网站上更改了其他一些东西后，它就停止了工作。 It is probably a simple error, but I am new to js and don't know how to fix this... This is my code:这可能是一个简单的错误，但我是 js 新手，不知道如何解决这个问题......这是我的代码：
$(document).ready(function() { $(window).scroll(function() { if ($(this).scrollTop() > 50) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); // scroll body to 0px on click $('#back-to-top').click(function() { $('body,html').animate({ scrollTop: 0 }, 400); return false; }); });
.back-to-top { position: fixed; bottom: 25px; right: 25px; display: none; }
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="height:100rem;">test</div> <a id="back-to-top" href="#" class="mr-m2b btn btn-primary btn-lg back-to-top" role="button">TOP<i class="fas fa-chevron-up"></i></a>
it used to work perfectly, yet I broke it somehow and I am not sure how... The javascript seems to be the problem as it does pretty much nothing, the question is why?它曾经完美地工作，但我以某种方式打破了它，我不确定如何...... javascript 似乎是问题，因为它几乎什么也没做，问题是为什么？ And why did it use to work before, but doesn't now, when I did not touch the function at all?!为什么它以前可以工作，但现在不行，当我根本没有触摸 function 时？！
edit: I recently deleted a custom scrollbar编辑：我最近删除了一个自定义滚动条
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: #A1394F;
outline: 1px solid slategrey;
}
but copying that back in doesn't help either.但是将其复制回去也无济于事。 The exact same, copy-pasted js code works in the code snippet here, but not on my html page... What am I missing?完全相同的复制粘贴的 js 代码在此处的代码片段中有效，但在我的 html 页面上无效……我错过了什么？
2 个解决方案
解决方案1
0 2020-06-04 19:01:42
its work in example, if your code is not working in your project try this.它的工作示例，如果您的代码在您的项目中不起作用，请尝试此操作。
// body only instead "body, html" or create id and put in body <body id="top"> // 仅使用 body 代替 "body, html" 或创建 id 并放入 body <body id="top">
then edit js into document.querySelector('#top').scrollIntoView({ behavior: 'smooth' });然后将 js 编辑到document.querySelector('#top').scrollIntoView({ behavior: 'smooth' });
or try this super smooth http://iamdustan.com/smoothscroll/或者试试这款超级顺滑的 http://iamdustan.com/smoothscroll/
JS JS
// Go to Top
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 800) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
// scroll to top
document.querySelector('.back-to-top').addEventListener('click', function(e) {
e.preventDefault();
document.querySelector('body').scrollIntoView({ behavior: 'smooth' });
});
});
解决方案2
0 已采纳 2020-06-04 19:43:58
I managed to fix it by copying the js script and pasting it again at the end of the body section.我设法通过复制 js 脚本并将其再次粘贴到正文部分的末尾来修复它。 The problem was caused by a wrong import order and not a code or version error.该问题是由错误的导入顺序引起的，而不是代码或版本错误。 Jquery 3.3, 3.4 and 3.5 all work fine if the import order is correct.如果导入顺序正确，Jquery 3.3、3.4 和 3.5 都可以正常工作。 It feels dumb to say it out loud, but a script that requires jquery can obviously not work if it is added before jquery is imported... So my scripts now look like this:大声说出来感觉很愚蠢，但是如果在导入 jquery 之前添加需要 jquery 的脚本显然无法工作......所以我的脚本现在看起来像这样：
<script src="{% static 'jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'popper1.16.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-to-top').click(function() {
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
});
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.