Question

我必须做一个横向网站。每个部分都是全屏的，我已经为每个部分添加了一个锚点以使用链接进行导航，但是我尝试了所有内容以获得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;
}

这是一个例子：https://jsfiddle.net/mnn94crj/10/

Answer 1

您好，您可以在js下面下载并放入头部 http://prajwalshrestha.com/js/jquery.jcarousel.pack.js

在<a>标记中添加此代码'anchorlink'，它可以平滑滚动

 <a href="#mission" class="anchorLink">MISSION DE L'ÉCOLE</a>

Answer 2

使用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});
        });
    });

});

https://jsfiddle.net/mnn94crj/20/

Answer 3

使用jQuery（animate）查看this更新的JSFiddle：

的JavaScript

$("#mission-link").on("click", function(){
  $('body').animate({scrollLeft: $("#mission").offset().left}, 800)
});

HTML

<body>
  <header class="section black">
    <a href="#" id="mission-link">MISSION DE L'ÉCOLE</a>
    <div class="logo"></div>
  </header>
  <section class="section gray" id="mission">
    Mission
  </section>
</body>

Answer 4

您在问题中标记了Jquery。所以...使用jquery的答案。

$("a").click(function(){
  var currentElement = $(this).attr("href");
  $('html, body').animate({scrollLeft: $(currentElement).offset().left}, 800);
  return false;

}）;

此外，这是一个有点重复的问题...... jquery: animate scrollLeft

水平平滑滚动

4 个答案: