2023年4月11日 14:09:27go评论68阅读模式

英文:

Why won't my hyperlinks to ID sections continue past the third page?

问题

我正在制作一个横向滚动的网站，共有4个部分。每个部分的ID如下：

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

当加载网站时，显示的是“第1部分”，文本上有超链接，点击后将跳转到#section2。这一切都运行正常，直到第三个部分，突然之间超链接本应跳转到#section4，却跳回#section1。

我认为这可能与容器和部分的宽度有关，但我无法找出问题。最初，我只有3个部分，除非添加第4部分，否则无法到达第3部分。

Codepen链接

感谢任何帮助，谢谢。

英文:

I'm working on a horizontally scrolling website, and I have 4 sections. Each section is ID'd as follows:

&lt;section id=&quot;section1&quot;&gt;
&lt;section id=&quot;section2&quot;&gt;
&lt;section id=&quot;section3&quot;&gt;
&lt;section id=&quot;section4&quot;&gt;

When you load the website, you are shown 'Section 1', and the text is hyperlinked to push you to #section2 when clicked. This works fine until it gets to the third section, when all of the a sudden the hyperlink that is suppose to push the user to #section4, pushes back to #section1.

I'm under the impression that it has something to do with container and section width, but I can't figure out the issue. I originally only had 3 sections, and could not get to section 3 unless I added section 4.

Codepen Link

Any help is appreciated, thank you

答案1

得分: 2

使用这种方法，通过添加scroll-behavior: smooth和overflow-x: scroll的CSS属性，隐藏滚动条，不需要使用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; }

这部分是CSS代码，用于实现平滑滚动和隐藏滚动条。

英文:

> Use this approach by adding scroll-behavior:smooth and overflow-x:scroll css property with scroll bar hidden, no javascript is required

The actual problem is calculating the target position but this method quite simple and responsive

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; }

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

  &lt;div class=&quot;container&quot;&gt;
    &lt;section id=&quot;section1&quot;&gt;
      &lt;a href=&quot;#section2&quot; class=&quot;scroll-link&quot;&gt;
        Section 1
      &lt;/a&gt; 
    &lt;/section&gt;
    
    &lt;section id=&quot;section2&quot;&gt;
      &lt;a href=&quot;#section3&quot; class=&quot;scroll-link&quot;&gt;
        Section 2
      &lt;/a&gt;
    &lt;/section&gt;
    
    &lt;section id=&quot;section3&quot;&gt;
      &lt;!-- Fix the link to point to #section1 --&gt;
        &lt;a href=&quot;#section4&quot; class=&quot;scroll-link&quot;&gt;
  Section 3
		&lt;/a&gt;
    &lt;/section&gt;
    
	   &lt;section id=&quot;section4&quot;&gt;
    &lt;a href=&quot;#section1&quot; class=&quot;scroll-link&quot;&gt;
      Section 4
    &lt;/a&gt;
  &lt;/section&gt;

	  
  &lt;/div&gt;

  &lt;script src=&quot;scripts.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

答案2

得分: 1

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

英文:

I have updated your code and here is the link: [codepenlink][1]
[1]: https://codepen.io/nizalsha/pen/qBJdLLG

答案3

得分: 1

请你检查一下以下代码链接吗？希望对你有用。

在第二部分中你给出了错误的ID。你只需要在你的HTML和body标签中添加“scroll-behavior: smooth;” 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">
      <!-- 修复链接指向 #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>

英文:

Can you please check the below code link? Hope it will work for you.

You have given the wrong ID in the second section. You just need to add the "scroll-behavior: smooth;" CSS property in your html and body tags.

And you don't need to add any Javascript it works with CSS and ID.

Please refer to this link: 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;
}

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

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

&lt;body&gt;

  &lt;div class=&quot;container&quot;&gt;
    &lt;section id=&quot;section1&quot;&gt;
      &lt;a href=&quot;#section2&quot; class=&quot;scroll-link&quot;&gt;
        Section 1
      &lt;/a&gt;
    &lt;/section&gt;

    &lt;section id=&quot;section2&quot;&gt;
      &lt;a href=&quot;#section3&quot; class=&quot;scroll-link&quot;&gt;
        Section 2
      &lt;/a&gt;
    &lt;/section&gt;

    &lt;section id=&quot;section3&quot;&gt;
      &lt;!-- Fix the link to point to #section1 --&gt;
      &lt;a href=&quot;#section4&quot; class=&quot;scroll-link&quot;&gt;
  Section 3
		&lt;/a&gt;
    &lt;/section&gt;

    &lt;section id=&quot;section4&quot;&gt;
      &lt;a href=&quot;#section1&quot; class=&quot;scroll-link&quot;&gt;
      Section 4
    &lt;/a&gt;
    &lt;/section&gt;


  &lt;/div&gt;

  &lt;script src=&quot;scripts.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

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

问题

答案1

答案2

答案3

创建 GitHub 检查运行仅将结果附加到第一个操作运行。

如何使用CSS将对象绝对定位在屏幕之外，而不出现垂直滚动条？

如何从一个 SCSS 文件中导入单个变量 angular?

如何在我的应用程序中显示最新用户帖子？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论