bootstrap 4 beta 2 back-to-top 不起作用答案

【问题标题】：bootstrap 4 beta 2 back-to-top does not workbootstrap 4 beta 2 back-to-top 不起作用
【发布时间】：2017-11-13 07:52:09
【问题描述】：

我的导航栏中有一个返回顶部链接，该链接在 bootstrap 3.3.7 中可以正常工作，但在 bootstrap 4 beta 2 中不能正常工作

返回顶部的 js 文件

$(document).ready(function(){
   var offset = 100;
   var duration = 800;

$(window).scroll(function () {
    if ($(this).scrollTop() > offset) {
        $('#back-to-top').fadeIn(duration);
    } else {
        $('#back-to-top').fadeOut(duration);
    }
});

// scroll body to 0px on click
$('#back-to-top').click(function (event) {
    event.preventDefault();
    $('#back-to-top').tooltip('hide');
    $('body,html').animate({
        scrollTop: 0
    }, duration);
    return false;
});

$('#back-to-top').tooltip('show');
});

Web 应用程序中的 html 代码

  <body id="page-top" data-spy="scroll" data-target=".fixed-top">

        <div id="main-navbar" class="navbar fixed-top navbar-expand-md navbar-custom navbar-dark" role="navigation" >


                <div class="navbar-header">

                    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-main-collapse">

                        <span class="sr-only">Toggle navigation</span>Menu
                        <i class="navbar-icon fa fa-bars icon"></i> 
                         <!--<span class="navbar-toggler-icon"></span>-->

                    </button>

                    <a href="#" id="menu-toggler" class="navbar-brand"> <i class="fa fa-bars"></i></a>
                    <a href="#" class="navbar-brand page-scroll" id="back-to-top">Funeral Aftercare Service</a>

                </div>

                <div class="collapse navbar-collapse" id="navbar-main-collapse">
                    <ul class="nav navbar-nav">
                        <li class="d-none"><a href="#page-top"></a></li>
                        <li class="nav-item">
                            <a class="<?php echo $index; ?>" href="index.php">
                                <span class="fa fa-home"></span> Home <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item"><a class="<?php echo $about; ?>" href="about_us.php">About Us</a></li>
                        <li class="nav-item"><a class="<?php echo $contact; ?>" href="contact_info.php">Contact Info</a></li>

                    </ul>...

我注意到在 bootstrap 3 中，jquery 文件 (jquery-3.2.1.min.js) 为我的 back-to-top 链接加载了更多功能，而在 bootstrap 4 中则更少。

bootstrap 4 在检查视图中仅加载 前 2 个，而 bootstrap 3 加载所有这些

点击 -back-to-top.js (jQuery)

点击 - jquery-3.2.1.min.js（冒泡DOM2）

focusin - jquery-3.2.1.min.js (jQuery)

focusout - jquery-3.2.1.min.js (jQuery)

mouseout - jquery-3.2.1.min.js (jQuery)

mouseout - jquery-3.2.1.min.js（冒泡 DOM2）

鼠标悬停 - jquery-3.2.1.min.js (jQuery)

鼠标悬停 - jquery-3.2.1.min.js（冒泡 DOM2）

【问题讨论】：

标签： jquery html twitter-bootstrap

【解决方案1】：

基于 bootstrap 4 文档：
“如果您使用的是我们编译的 JavaScript，请不要忘记在其之前包含 jQuery 和 Popper.js 的 CDN 版本。”

您的代码似乎正确，您需要在 jquery 之后和 bootstrap 4 之前加载 popper.js。

【讨论】：

看来是这样，我把 popper.js 放在 bootstrap 4 js 之后，这就是动画不起作用的原因。
@JohnLaimuin 你的意思是滚动动画吗？这个对我有用。没错。