故障跳锚标签

Question

我正在使用 Flickity 构建一个新项目，但我运行遇到了我在主页上创建的跳转锚标记的问题。它的目的是在单击时跳转到主页上的特定部分。它只是一个字体很棒的图标，下面有一些文字，没有别的。

然而，尽管所有 3 个部分都相同，锚标签只出现在第一部分。更重要的是，我已经将它编程为跳转到下一节 (1 > 2 > 3)，但它只想在单击时跳转到最后一节。

我粘贴了下面的代码，但您可以通过观看此屏幕录像更好地了解它当前的工作原理：https://imgur.com/a/9HBB6by

// ---------------------------------------- UNIVERSAL ---------------------------------------- //
// ------------------------------------------------------------------------------------------- //
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

// ---------------------------------------- FLICKITY ---------------------------------------- //
// ------------------------------------------------------------------------------------------ //

var elem = document.querySelector('.main-carousel');
var flkty = new Flickity(elem, {
    // options
    cellAlign: 'left',
    contain: true
});

// element argument can be a selector string
//   for an individual element
var flkty = new Flickity('.main-carousel', {
    // options
});
 
// ---------------------------------------- ANIMATIONS ---------------------------------------- //
// -------------------------------------------------------------------------------------------- //

/* ---------------------------------------- UNIVERSAL STYLES ---------------------------------------- */
/* -------------------------------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

.topnav {
    background-color: #333;
    overflow: hidden;
}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav a.active {
    background-color: #04AA6D;
    color: white;
}

.topnav .icon {
    display: none;
}

.rightMenuItems {
    float: right !important;
}

.scrollDown {
    position: absolute;
    top: 93%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    
}

.scrollDown a {
    text-decoration: none;
}

.scrollDown p {
    margin: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 20px;
    color: #fff;
}

.fa-chevron-down {
    width: 50px;
    height: 50px;
    font-size: 32px;
    color:  #fff;
    ;
}

.scrollDown:hover {
    transition: .2s ease;
}

/* ---------------------------------------- ANIMATIONS ---------------------------------------- */
/* -------------------------------------------------------------------------------------------- */

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    5% {
        transform: translateY(0);
    }
    10% {
        transform: translateY(-25%);
    }
    15% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(0);
    }
}
.fa-chevron-down {
    animation: bounce 10s infinite;
}



/* ---------------------------------------- FLICKITY ---------------------------------------- */
/* ------------------------------------------------------------------------------------------ */

.carousel-cell {
    width: 100%;
    height: 100vh;
    margin-right: 10px;
}

.homeSection1 .carousel-cell {
    background-color: #02cd82;
}

.homeSection2 .carousel-cell {
    background-color: #cd4902;
}

.homeSection3 .carousel-cell {
    background-color: #0249cd;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Fox Bank</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles/styles.css">
        <link rel="stylesheet" href="styles/normalize.css">
        <link rel="stylesheet" href="styles/responsive.css">
        <link rel="stylesheet" href="styles/flickity.min.css" media="screen">
        <link rel="stylesheet" href="styles/scrollbutton.css">
        <script src="https://kit.fontawesome.com/8821130486.js" crossorigin="anonymous"></script>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
        <script src="js/jquery.js"></script>

    </head>

    <body>
        <div class="topnav" id="myTopnav top">
            <a href="#home" class="active">Home</a>
            <a class="rightMenuItems" href="#news">News</a>
            <a class="rightMenuItems" href="#contact">Contact</a>
            <a class="rightMenuItems" href="#about">About</a>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                <i class="fas fa-bars"></i>
            </a>
        </div>

        <!-- Main Image Carousel -->
        <div id="homeSection1">
            <div class="main-carousel homeSection1" data-flickity='{ "autoPlay": 6000 }'>
                <div class="carousel-cell">...</div>
                <div class="carousel-cell">...</div>
                <div class="carousel-cell">...</div>
            </div>
            <div class="scrollDown">
                <a class="nextSection" href="#homeSection2">
                    <i id="scrollDownArrow" class="fas fa-chevron-down"></i>
                    <p>Scroll</p>
                </a>
            </div>
        </div>
        
        <div id="homeSection2">
            <div class="main-carousel homeSection2" data-flickity='{ "autoPlay": 6000 }'>
                <div class="carousel-cell">...</div>
                <div class="carousel-cell">...</div>
                <div class="carousel-cell">...</div>
            </div>
            <div class="scrollDown">
                <a class="nextSection" href="#homeSection3">
                    <i id="scrollDownArrow" class="fas fa-chevron-down"></i>
                    <p>Scroll</p>
                </a>
            </div>
        </div>

        <div id="homeSection3">
            <div class="main-carousel homeSection3" data-flickity='{ "autoPlay": 6000 }'>
                <div class="carousel-cell">...</div>
                <div class="carousel-cell">...</div>
                <div class="carousel-cell">...</div>
            </div>
            <div class="scrollDown">
                <a class="nextSection" href="#homeSection3">
                    <i id="scrollDownArrow" class="fas fa-chevron-down"></i>
                    <p>Scroll</p>
                </a>
            </div>
        </div>
        
        
        <script src="js/app.js" async defer></script>
        <script src="js/flickity.min.js"></script>
    </body>
</html>

Answer 1

因为 .scrolllDown 部分有 position:absolute; 规则。您应该将 position: relative; 添加到主要部分 homeSection2 或 homeSection3 等。然后问题就消失了。

故障跳锚标签

Malfunctioning jumping anchor tag

html

css

tags

anchor