CODEWITHSUNDEEP
jqueryhtmlscroll
user1922019
user1922019

Reputation: 39

How to scrollLeft onclick on a div within a div

I have a container div with a set width and height and overflow set to scroll. Within that div is another content div which I can scroll. I want to add navigation elements that will automatically scroll to sepcified points (in pixels). I'm using Jquery currently and not getting anywhere. Any help would be awesome!

This is my HTML

<button class="scrollto"  style="position:fixed; top:100px;left:200px; width:150px;   height:50px; z-index:3;">purple_lamp</button>

<div id="container" >
  <div id="main_content">
    <img id="urban_chic" src="images/bg.jpg" />
    <img id="purple_lamp" src="images/purple_lamp.png" data-stellar-ratio="1.5"/>
    <img id="sofa" src="images/sofa.png" data-stellar-ratio="1.5"/>
    <img id="wall_clock" src="images/jacobs_wall_clock.png" data-stellar-ratio="1.5"/>
    <img id="yellow_shoe" src="images/yellow_shoe.png"  data-stellar-ratio="1.5" />
    <img id="intro" src="images/intro.jpg" />
  </div>
</div>

And this is my CSS

#container{
  height:768px;
  width:1024px;
  position:absolute;
  overflow:scroll;
}

#main_content{
  height:768px;
  width: 5454px;
  position:absolute;
}

And my JS

$('.scrollto').click(function() {
    $('#container').animate( { scrollRight: '+=500' }, 1000, 'easeOutQuad' );
});

Upvotes: 0

Views: 7705

Answers (1)

adeneo
adeneo

Reputation: 318162

There is no scrollRight method, you'll still need to use scrollLeft and just invert the values:

$('.scrollto').click(function() {
    $('#container').animate( { scrollLeft: '-=500' }, 1000, 'easeOutQuad' );
});

FIDDLE

Upvotes: 1

Related Questions