CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Xavier Godbout
Xavier Godbout

Reputation: 35

Horizontal Smoothscrolling

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/

Upvotes: 0

Views: 137

Answers (4)

Prajwal Shrestha
Prajwal Shrestha

Reputation: 553

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>

Upvotes: 1

Dux
Dux

Reputation: 319

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/

Upvotes: 1

user4555425
user4555425

Reputation:

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

Upvotes: 0

Arg0n
Arg0n

Reputation: 8423

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>

Upvotes: 0

Related Questions