英文:
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部分。
感谢任何帮助，谢谢。
英文:
I'm working on a horizontally scrolling website, and I have 4 sections. Each section is ID'd as follows:
<section id="section1">
<section id="section2">
<section id="section3">
<section id="section4">
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.
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
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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; }
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
答案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/
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论