0

I have to do a horizontal website. Each section are fullscreen and I've put an anchor to each section to navigate with links, but I tried everything to get a javascript to work to do a horizontal smooth scrolling and but I can't.

Here is the 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>

And my 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;
}

Here is a exemple: https://jsfiddle.net/mnn94crj/10/

Xavier Godbout
  • 35
  • 6

4 Answers4

1

Hi you can download below js and put inside head section
http://prajwalshrestha.com/js/jquery.jcarousel.pack.js

Add this code 'anchorlink' in your <a> tag, it makes smooth scroll

 <a href="#mission" class="anchorLink">MISSION DE L'ÉCOLE</a>
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Prajwal Shrestha
  • 524
  • 3
  • 12
1

Add a function to all your target links with jquery and use animate for an animated scrolling.

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

Dux
  • 309
  • 1
  • 5
0

See this updated JSFiddle using jQuery (animate):

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>
Arg0n
  • 8,283
  • 2
  • 21
  • 38
0

You tagged Jquery in your question. So... The answer using jquery.

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

});

Also, it is a bit duplicate question... jquery: animate scrollLeft

Community
  • 1
  • 1