水平平滑滚动答案

【问题标题】：Horizontal Smoothscrolling水平平滑滚动
【发布时间】：2015-12-14 01:29:34
【问题描述】：

我必须做一个横向的网站。每个部分都是全屏的，我在每个部分都放置了一个锚点以使用链接导航，但我尝试了一切来让 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/

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

使用 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/

【讨论】：

【解决方案2】：

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

在你的<a>标签中添加这个代码'anchorlink'，它可以平滑滚动

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

【讨论】：

【解决方案3】：

请参阅this 使用 jQuery 更新的 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>

【讨论】：

【解决方案4】：

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

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

});

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

【讨论】：