我在一个水平滚动的网站上工作,我有4个部分。每个部分的ID如下:
<section id="section1">
<section id="section2">
<section id="section3">
<section id="section4">
当你加载网站时,你会看到“第1节”,点击时,文本会被超链接到#section2。这很好,直到它到达第三节,突然间,应该将用户推到#section4的超链接推回#section1。
我的印象是它与容器和部分宽度有关,但我无法弄清楚问题。我原来只有3个部分,除非我添加第4部分,否则无法到达第3部分。
Codepen Link
任何帮助都很感激,谢谢
3条答案
按热度按时间iyfjxgzm1#
通过添加scroll-behavior:smooth和overflow-x:scrollcss属性来使用这种方法,并隐藏滚动条,不需要JavaScript
实际的问题是计算目标位置,但这种方法相当简单和响应
xuo3flqw2#
我已经更新了你的代码,这里是链接:[codepenlink][1] [1]:https://codepen.io/nizalsha/pen/qBJdLLG
8ftvxx2r3#
你能检查下面的代码链接吗?希望它能为你工作。
您在第二部分中给出了错误的ID。您只需要添加“scroll-behavior:smooth;”html和body标签中的CSS属性。
而且你不需要添加任何Javascript,它可以与CSS和ID一起工作。
请参考此链接:https://jsfiddle.net/yudizsolutions/p5gkfmw3/