1. 首页
  2. 问答
  3. 水平平滑滚动

水平平滑滚动

2015-12-07 256 views
0

我必须做一个水平网站。每个部分都是全屏，我已经为每个部分放置了一个锚点以便用链接进行导航，但我尝试了所有的操作来获得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/

来源

2015-12-07 Xavier Godbout

回答

1

添加一个函数，所有你的目标链接与jQuery和动画使用动画s crolling。

$(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/

来源

2015-12-07 15:03:22 Dux

0

见this更新的jsfiddle使用jQuery（动画）：

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>

来源

2015-12-07 14:51:53 Arg0n

0

你在你的问题标记jQuery的。所以...使用jquery的答案。

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

}）;

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

来源

2015-12-07 14:54:43 tryingDelete

相关问题

 相关问题