css 为什么我的ID部分的超链接在第三页之后不再继续？

fnx2tebb 于 2023-04-13 发布在其他

关注(0)|答案(3)|浏览(124)

我在一个水平滚动的网站上工作，我有4个部分。每个部分的ID如下：

<section id="section1">
<section id="section2">
<section id="section3">
<section id="section4">

当你加载网站时，你会看到“第1节”，点击时，文本会被超链接到#section2。这很好，直到它到达第三节，突然间，应该将用户推到#section4的超链接推回#section1。
我的印象是它与容器和部分宽度有关，但我无法弄清楚问题。我原来只有3个部分，除非我添加第4部分，否则无法到达第3部分。
Codepen Link
任何帮助都很感激，谢谢

css

来源：https://stackoverflow.com/questions/75982841/why-wont-my-hyperlinks-to-id-sections-continue-past-the-third-page

3条答案

按热度按时间

iyfjxgzm1#

通过添加scroll-behavior：smooth和overflow-x：scrollcss属性来使用这种方法，并隐藏滚动条，不需要JavaScript
实际的问题是计算目标位置，但这种方法相当简单和响应

html {
  margin: 0;
  padding: 0;
  overflow-x: scroll;
  font-family: Arial, sans-serif;
  scroll-behavior:smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
html::-webkit-scrollbar { 
width: 0;
height: 0;
}
nav {
  display: flex;
  justify-content: space-around;
  background-color: #333;
  padding: 1rem 0;
}

nav a {
  color: white;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

.container {
  display: flex;
  flex-direction: row;
  width: 400vw;
}

section {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-sizing: border-box;
}

#section1 { background-color: #f1c40f; }
#section2 { background-color: #2ecc71; }
#section3 { background-color: #3498db; }
#section4 { background-color: #2ecc71; }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Horizontal Scrolling Webpage</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

  <div class="container">
    <section id="section1">
      <a href="#section2" class="scroll-link">
        Section 1
      </a> 
    </section>
    
    <section id="section2">
      <a href="#section3" class="scroll-link">
        Section 2
      </a>
    </section>
    
    <section id="section3">
      <!-- Fix the link to point to #section1 -->
        <a href="#section4" class="scroll-link">
  Section 3
        </a>
    </section>
    
       <section id="section4">
    <a href="#section1" class="scroll-link">
      Section 4
    </a>
  </section>

      
  </div>

  <script src="scripts.js"></script>
</body>
</html>

赞(0）回复(0）举报 2023-04-13

xuo3flqw2#

我已经更新了你的代码，这里是链接：[codepenlink][1] [1]：https://codepen.io/nizalsha/pen/qBJdLLG

赞(0）回复(0）举报 2023-04-13

8ftvxx2r3#

你能检查下面的代码链接吗？希望它能为你工作。
您在第二部分中给出了错误的ID。您只需要添加“scroll-behavior：smooth;”html和body标签中的CSS属性。
而且你不需要添加任何Javascript，它可以与CSS和ID一起工作。
请参考此链接：https://jsfiddle.net/yudizsolutions/p5gkfmw3/

body,
html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: Arial, sans-serif;
  scroll-behavior: smooth;
}

nav {
  display: flex;
  justify-content: space-around;
  background-color: #333;
  padding: 1rem 0;
}

nav a {
  color: white;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

.container {
  display: flex;
  flex-direction: row;
  width: 400vw;
}

section {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-sizing: border-box;
}

#section1 {
  background-color: #f1c40f;
}

#section2 {
  background-color: #2ecc71;
}

#section3 {
  background-color: #3498db;
}

#section4 {
  background-color: #2ecc71;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Horizontal Scrolling Webpage</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>

  <div class="container">
    <section id="section1">
      <a href="#section2" class="scroll-link">
        Section 1
      </a>
    </section>

    <section id="section2">
      <a href="#section3" class="scroll-link">
        Section 2
      </a>
    </section>

    <section id="section3">
      <!-- Fix the link to point to #section1 -->
      <a href="#section4" class="scroll-link">
  Section 3
        </a>
    </section>

    <section id="section4">
      <a href="#section1" class="scroll-link">
      Section 4
    </a>
    </section>

  </div>

  <script src="scripts.js"></script>
</body>

</html>

赞(0）回复(0）举报 2023-04-13

我来回答

css 为什么我的ID部分的超链接在第三页之后不再继续？

3条答案

相关问题

热门标签

最新问答