Bootstrap 4单击下拉菜单滚动到窗口顶部

Question

I have three dropdown-items, and when I click each one for the first time it works as expected, but once I click on one of them for the second time, it scrolls up to the top before switching to the appropriate tab-panel. 我有三个下拉菜单项，当我第一次单击每个下拉菜单项时，按预期的方式工作，但是当我第二次单击其中一个菜单项时，它将滚动到顶部，然后切换到适当的选项卡面板。 Why does it work as expected the first time but incorrectly the second time? 为什么它第一次能按预期工作，但第二次却不正确？ My HTML is below in a code snippet, but I can not get my jQuery to not cause an error in the snippet so that is below separately. 我的HTML在代码段的下面，但是我无法让jQuery不会在代码段中引起错误，因此下面是单独的内容。

What it looks like 看起来像什么

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <!-- import jQuery scrolling file below as scrolling.js --> <script src="js/scrolling.js"></script> </head> <body> <!-- ********** MAIN CONTENT ********** --> <div id="main"> <section class="background-image d-flex align-items-center" id="home"> <div class="container-fluid"> <div class="row"> <div class="col-xl-1 col-lg-1 col-md-1 col-sm-0 col-xs-0"></div> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12"> <h1 class="home-header">Hello!</h1> <br><br><br><br><br><br><br><br><br><br> </div> <div class="col-xl-5 col-lg-5 col-md-5 col-sm-0 col-xs-0"></div> </div> </div> </section> <!-- ********** ABOUT ME ********** --> <section class="container-fluid" id="about"> <div class="row"> <div class="col-xl-1 col-lg-1 col-md-1 col-sm-0 col-xs-0"></div> <div class="col-xl-10 col-lg-10 col-md-10 col-sm-12 col-xs-12"> <h1>About Me</h1> <br><br><br><br><br><br><br><br><br><br> <div class="col-xl-1 col-lg-1 col-md-1 col-sm-0 col-xs-0"></div> </div> </div> </section> <!-- ********** EXPERIENCE ********** --> <section class="container-fluid" id="experience"> <div class="row"> <div class="col-xl-1 col-lg-1 col-md-1 col-sm-0 col-xs-0"></div> <div class="col-xl-10 col-lg-10 col-md-10 col-sm-12 col-xs-12"> <h1>Experience</h1> <br><br><br><br><br><br><br><br><br><br> </div> <div class="col-xl-1 col-lg-1 col-md-1 col-sm-0 col-xs-0"></div> </div> </section> <!-- ********** PROJECTS ********** --> <section id="projects"> <div class="container-fluid"> <div class="row"> <div class="col-xl-1 col-lg-1 col-md-1 col-sm-0 col-xs-0"></div> <div class="col-xl-10 col-lg-10 col-md-10 col-sm-12 col-xs-12"> <h1>Projects</h1> </div> <div class="col-xl-1 col-lg-1 col-md-1 col-sm-0 col-xs-0"></div> </div> </div> <div> <ul class="nav nav-tabs nav-justified"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" id="dropdown">Projects</a> <div class="dropdown-menu dropdown-menu-center"> <a class="dropdown-item" data-toggle="tab" href="#tab1">tab1</a> <a class="dropdown-item" data-toggle="tab" href="#tab2">tab2</a> <a class="dropdown-item" data-toggle="tab" href="#tab3">tab3</a> </div> </li> </ul> </div> <div class="tab-content"> <div class="tab-pane container fade show active" role="tabpanel" id="tab1"> <div class="row"> <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-xs-12"> <h3>tab1</h3> </div> </div> </div> <div role="tabpanel" class="tab-pane container fade" id="tab2"> <div class="row"> <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-xs-12"> <h3>tab2</h3> </div> </div> </div> <div role="tabpanel" class="tab-pane container fade" id="tab3"> <div class="row"> <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-xs-12"> <h3>tab3</h3> </div> </div> </div> </div> </section> </div> </body> </html>

My jQuery: 我的jQuery：

$(document).ready(function() {
    $("a").on('click', function(e) {
        let ref = jQuery(this).attr("class");
        if (this.getAttribute("href").charAt(0) === "#" && (ref !== "nav-link" && ref !== "dropdown-item")) {
            e.preventDefault();
            var hash = this.hash;
            $('html, body').animate({
                scrollTop: $(hash).offset().top
            }, 800, function() {
                window.location.hash = hash;
            });
        }
    });
});

Answer 1

Used the following code to resolve my issue. 使用以下代码解决了我的问题。 jQuery Code jQuery代码

Bootstrap 4单击下拉菜单滚动到窗口顶部

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-07-18 22:40:26

Bootstrap 4单击下拉菜单滚动到窗口顶部

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-07-18 22:40:26

解决方案1
0 已采纳 2018-07-18 22:40:26