我要做一个横向网站。每个部分都是全屏的，我在每个部分都放置了一个 anchor 以使用链接进行导航，但我尝试了所有方法来让 javascript 工作以进行水平平滑滚动，但我做不到。
这是 HTML:
<body>
<header class="section black">
<a href="#mission">MISSION DE L'ÉCOLE</a>
<div class="logo"></div>
</header>
<section class="section gray" id="mission">
<p>
second section
</p>
</section>
</body>
还有我的 CSS:
* {
margin: 0;
}
body {
width: 2000px;
position: absolute;
top:0px;
left:0px;
bottom:0px;
}
.section {
margin: 0px;
bottom: 0px;
width: 100vw;
float: left;
height: 100vh;
}
.black {
background-color: #000000;
}
.gray {
background-color: #838B8B;
}
最佳答案
使用 jquery 为所有目标链接添加一个函数，并使用 animate 进行动画滚动。
$(document).ready(function(){
$('a').each(function(){ // loop each <a>
var href = $(this).attr('href');
if (href[0] != "#") return;
$(this).on('click', function(){ // Function when clicked
$('body, html').animate({scrollLeft: $(href).offset().left});
});
});
});
关于javascript - 水平平滑滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34136235/