Odtnhj

I'm using a code found from a post in stackoverflow to scroll a division horizontally. I can scroll the div for full width but can't scroll for a specific amount of width.

$("div").on("click", function(event) 
 event.preventDefault();
 $("html, body").animate(
 scrollLeft: $(document).width()
 , "slow");
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

Above code is working!

jQuery documentation says that width() function can get values as parameters but when I try like follows, the scrolling is not working.

$("div").on("click", function(event) 
 event.preventDefault();
 $("html, body").animate(
 scrollLeft: $(document).width(50)
 , "slow");
);

How can I solve this?

$(document).width() function provide the window width. That means $(document).width() is equal to a value. Then you have to replace $(document).width() with your value. That's how it work.

$("div").on("click", function(event) 
 event.preventDefault();
 $("html, body").animate(
 scrollLeft: "100px"
 , "slow");
);

Here you go with a solution

Documentation: https://api.jquery.com/scrollleft/

$("div").on("click", function(event) 
 event.preventDefault();
 $("html, body").animate(
 scrollLeft: "50px"
 , "slow");
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

Hope this will help you.

That's because the construction $(document).width(50) is not valid, you can just use a regular number, or the result of calculation instead. For example, these results are valid:

$(document).width()
50
$(document).width() - 50

Here is an example:

$("div").on("click", function(event) 
 event.preventDefault();
 $("html, body").animate(
 scrollLeft: $(document).width() - 1000
 , "slow");
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

Reason

Reason why scrollLeft: $(document).width(50) didn't work because $(document).width(50) is not returning a valid number. (Since it is a setter method.)

Fixes

.scrollLeft( value ) Is expecting value of type: Number (An integer indicating the new position to set the scroll bar to.)

$("div").on("click", function(event) 
 event.preventDefault();
 var ScrollValue = $(document).width() - 100;
 $("html, body").animate(
 scrollLeft: ScrollValue
 , "slow");
);

ScrollValue can be calculated accordingly to your requirement and be passed as an integer value.

Hope this solves your problem, For more info., refer: https://api.jquery.com/scrollleft/