Question

我目前正在学习html的udemy课程，遇到一个奇怪的问题。我创建了一个箭头，当我单击它时，它应该使用平滑滚动将我带到页面的特定部分。但是，单击箭头后，页面会平滑滚动到该位置（id =“ secOne”），然后立即后退回到箭头。当我尝试再次将滚动条移动到secOne位置时，Chrome / Safari阻止了我这样做。

请参阅下面的gif演示我的问题：

我不确定我的代码有什么问题，我觉得我这里一定缺少一些非常简单的东西。

我已经正确编码了href：

<a href="#secOne"><i class="ion-ios-arrow-thin-down arrow bounce"></i></a>

这是我链接的范围：

    <span id="secOne"></span>

这是我的完整代码：

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Sam's Plumbing Services</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap" rel="stylesheet">
</head>
<body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light" role="navigation">

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>

        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <a class="navbar-brand" href="#">Sam's Plumbing Services</a>
            <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
                <li class="nav-item active ml-4">
                    <a class="nav-link" href="#">Home 
                        <!--        this is to assist Screen Readers (SR) only to show them the current tab selected-->
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item ml-4">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item ml-4">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
    <!--       navigation ends here-->

    <!--       carousel-->
    <div class="d-flex justify-content-center">
        <div id="fullCarousel" class="carousel slide " data-ride="carousel">

            <a href="#secOne"><i class="ion-ios-arrow-thin-down arrow bounce"></i></a>
            <!-- Indicators -->
            <ul class="carousel-indicators">
                <li data-target="#fullCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#fullCarousel" data-slide-to="1"></li>
                <li data-target="#fullCarousel" data-slide-to="2"></li>
            </ul>

            <!-- The slideshow -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <!--     class img-fluid will make the carousel images responsive-->
                    <img src="img/pipes2.png" alt="Pipes" class="img-fluid"> 

                    <h3 class="carousel-caption carousel_h3 animated bounceInLeft">Your trusted plumber</h3>
                    <p class="carousel-caption carousel_p animated bounceInLeft">I'm ready to complete any job, big or small</p>
                </div>
                <div class="carousel-item">
                    <img src="img/tools2.png" alt="Spring" class="img-fluid">
                </div>
                <div class="carousel-item">
                    <img src="img/workers2.png" alt="Summer" class="img-fluid">
                </div>
            </div>
        </div>
    </div>

    <span id="secOne"></span>
    <!--       carousel ends-->

    <div class="container">

        <p class="pmargin">
            The standard Lorem Ipsum passage, used since the 1500s
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>

    </div>

    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="js/script.js"></script>
    <script src="js/jquery.smoothscroll.min.js"></script>
    <script src="https://unpkg.com/ionicons@4.2.2/dist/ionicons.js"></script>
</body>

谁能看到导致此不良行为的错误是什么？

编辑：运行页面时，我正在使用Brackets Live Preview。当我通过将我的网页拖放到Chrome上的Brackets Live Preview外部的Chrome浏览器中打开网页时，该行为按预期进行，因此我认为这可能是其Live Preview中的Brackets错误。有谁知道如何解决Brackets中的这个bug？

HTML：单击链接后，平滑滚动到网页“反冲”部分

0 个答案: