Arturo García Arturo García - 7 months ago 29
Javascript Question

Automatic scroll works in different

I've got a problem with automatic scroll to bottom. It's working at different speeds and I need it to work at a regular speed, it rush in some areas and slow down in other areas. Do you see the bug ? It's pretty evident in Google Chrome, but you can also use a chronometer to check it.



$(document).ready(
function(){
$("#stop").click(function () {
$("#play").css({
"opacity":"0.25",
"pointer-events":"auto",
"cursor":"pointer"
});
$("#stop").css({
"opacity":"1",
"pointer-events":"none"
});
$("html, body").stop();
});
$("#play").click(function () {
var scrolli= $(document).height()- $(window).height()
$("#stop").css({
"opacity":"0.25",
"pointer-events":"auto",
"cursor":"pointer"
});
$("#play").css({
"opacity":"1",
"pointer-events":"none"
});
$("html, body").animate({ scrollTop: scrolli },180000);
});
})

#dalealplay{
position:fixed; top:30px; color:white; font-size:12px; right:50px; line-height:5px; z-index:200; background:black; text-align:center; padding:5px;
}
#play{
opacity:0.25;
cursor:pointer;
}
#stop{
cursor:auto;
pointer-events:none;
}
.metro{
width:100px;
text-align:right;
color:red;
height:100px;
background:rgba(0,255,201,0.10);
z-index:0;
position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dalealplay">
<span id="play">PLAY</span>/<span id="stop">STOP</span>
</div>

<div class="metro">
_0
</div>
<div class="metro">
_100
</div>
<div class="metro">
_200
</div>
<div class="metro">
_300
</div>
<div class="metro">
_400
</div>
<div class="metro">
_500
</div>
<div class="metro">
_600
</div>
<div class="metro">
_700
</div>
<div class="metro">
_800
</div>
<div class="metro">
_900
</div>
<div class="metro">
_1000
</div>
<div class="metro">
_100
</div>
<div class="metro">
_200
</div>
<div class="metro">
_300
</div>
<div class="metro">
_400
</div>
<div class="metro">
_500
</div>
<div class="metro">
_600
</div>
<div class="metro">
_700
</div>
<div class="metro">
_800
</div>
<div class="metro">
_900
</div>
<div class="metro">
_1000
</div>
<div class="metro">
_100
</div>
<div class="metro">
_200
</div>
<div class="metro">
_300
</div>
<div class="metro">
_400
</div>
<div class="metro">
_500
</div>
<div class="metro">
_600
</div>
<div class="metro">
_700
</div>
<div class="metro">
_800
</div>
<div class="metro">
_900
</div>
<div class="metro">
_1000
</div>
<div class="metro">
_100
</div>
<div class="metro">
_200
</div>
<div class="metro">
_300
</div>
<div class="metro">
_400
</div>
<div class="metro">
_500
</div>
<div class="metro">
_600
</div>
<div class="metro">
_700
</div>
<div class="metro">
_800
</div>
<div class="metro">
_900
</div>
<div class="metro">
_1000
</div>
<div class="metro">
_100
</div>
<div class="metro">
_200
</div>
<div class="metro">
_300
</div>
<div class="metro">
_400
</div>
<div class="metro">
_500
</div>
<div class="metro">
_600
</div>
<div class="metro">
_700
</div>
<div class="metro">
_800
</div>
<div class="metro">
_900
</div>
<div class="metro">
_1000
</div>
<div class="metro">
_100
</div>
<div class="metro">
_200
</div>
<div class="metro">
_300
</div>
<div class="metro">
_400
</div>
<div class="metro">
_500
</div>
<div class="metro">
_600
</div>
<div class="metro">
_700
</div>
<div class="metro">
_800
</div>
<div class="metro">
_900
</div>
<div class="metro">
_1000
</div>
<div class="metro">
_100
</div>
<div class="metro">
_200
</div>
<div class="metro">
_300
</div>
<div class="metro">
_400
</div>
<div class="metro">
_500
</div>
<div class="metro">
_600
</div>
<div class="metro">
_700
</div>
<div class="metro">
_800
</div>
<div class="metro">
_900
</div>
<div class="metro">
_1000
</div>
<div class="metro">
_100
</div>
<div class="metro">
_200
</div>
<div class="metro">
_300
</div>
<div class="metro">
_400
</div>
<div class="metro">
_500
</div>
<div class="metro">
_600
</div>
<div class="metro">
_700
</div>
<div class="metro">
_800
</div>
<div class="metro">
_900
</div>
<div class="metro">
_1000
</div>
<div class="metro">
_100
</div>
<div class="metro">
_200
</div>
<div class="metro">
_300
</div>
<div class="metro">
_400
</div>
<div class="metro">
_500
</div>
<div class="metro">
_600
</div>
<div class="metro">
_700
</div>
<div class="metro">
_800
</div>
<div class="metro">
_900
</div>
<div class="metro">
_1000
</div>
<div class="metro">
_100
</div>
<div class="metro">
_200
</div>
<div class="metro">
_300
</div>
<div class="metro">
_400
</div>
<div class="metro">
_500
</div>
<div class="metro">
_600
</div>
<div class="metro">
_700
</div>
<div class="metro">
_800
</div>
<div class="metro">
_900
</div>
<div class="metro">
_1000
</div>
<div class="metro">
_100
</div>
<div class="metro">
_200
</div>
<div class="metro">
_300
</div>
<div class="metro">
_400
</div>
<div class="metro">
_500
</div>
<div class="metro">
_600
</div>
<div class="metro">
_700
</div>
<div class="metro">
_800
</div>
<div class="metro">
_900
</div>
<div class="metro">
_1000
</div>
<div class="metro">
_100
</div>
<div class="metro">
_200
</div>
<div class="metro">
_300
</div>
<div class="metro">
_400
</div>
<div class="metro">
_500
</div>
<div class="metro">
_600
</div>
<div class="metro">
_700
</div>
<div class="metro">
_800
</div>
<div class="metro">
_900
</div>
<div class="metro">
_1000
</div>
<div class="metro">
_100
</div>
<div class="metro">
_200
</div>
<div class="metro">
_300
</div>
<div class="metro">
_400
</div>
<div class="metro">
_500
</div>
<div class="metro">
_600
</div>
<div class="metro">
_700
</div>
<div class="metro">
_800
</div>
<div class="metro">
_900
</div>
<div class="metro">
_1000
</div>
<div class="metro">
_100
</div>
<div class="metro">
_200
</div>
<div class="metro">
_300
</div>
<div class="metro">
_400
</div>
<div class="metro">
_500
</div>
<div class="metro">
_600
</div>
<div class="metro">
_700
</div>
<div class="metro">
_800
</div>
<div class="metro">
_900
</div>
<div class="metro">
_1000
</div>
<div class="metro">
_100
</div>
<div class="metro">
_200
</div>
<div class="metro">
_300
</div>
<div class="metro">
_400
</div>
<div class="metro">
_500
</div>
<div class="metro">
_600
</div>
<div class="metro">
_700
</div>
<div class="metro">
_800
</div>
<div class="metro">
_900
</div>
<div class="metro">
_1000
</div>
<div class="metro">
_100
</div>
<div class="metro">
_200
</div>
<div class="metro">
_300
</div>
<div class="metro">
_400
</div>
<div class="metro">
_500
</div>
<div class="metro">
_600
</div>
<div class="metro">
_700
</div>
<div class="metro">
_800
</div>
<div class="metro">
_900
</div>
<div class="metro">
_1000
</div>
<div class="metro">
_100
</div>
<div class="metro">
_200
</div>
<div class="metro">
_300
</div>
<div class="metro">
_400
</div>
<div class="metro">
_500
</div>
<div class="metro">
_600
</div>
<div class="metro">
_700
</div>
<div class="metro">
_800
</div>
<div class="metro">
_900
</div>
<div class="metro">
_1000
</div>
<div class="metro">
_100
</div>
<div class="metro">
_200
</div>
<div class="metro">
_300
</div>
<div class="metro">
_400
</div>
<div class="metro">
_500
</div>
<div class="metro">
_600
</div>
<div class="metro">
_700
</div>
<div class="metro">
_800
</div>
<div class="metro">
_900
</div>
<div class="metro">
_1000
</div>
<div class="metro">
_100
</div>
<div class="metro">
_200
</div>
<div class="metro">
_300
</div>
<div class="metro">
_400
</div>
<div class="metro">
_500
</div>
<div class="metro">
_600
</div>
<div class="metro">
_700
</div>
<div class="metro">
_800
</div>
<div class="metro">
_900
</div>
<div class="metro">
_1000
</div>




Answer

The default jquery .animate function uses an easing function called 'swing' that starts out a little slowly, gains speed, and then ends more slowly. It sounds like you'd like to use the linear easing function.

Try:

$("html, body").animate({ scrollTop: scrolli },180000, 'linear');

http://api.jquery.com/animate/

Comments