Tag: autoscroll
Nabin Nepal (Starx) autoscroll javascript jquery
March 23, 2012

smooth auto scroll by using javascript

Question by hiteshtr

hiteshtrhiteshtr

hi i am trying to implement a code on my web page to auto scroll after loading the page, i used javascript function to perform auto scrolling and called my function onload event of body of my page but the page is not scrolling smoothly so tell me any way to auto scroll my page smoothly my javascript function is as follows:

function pageScroll() {
        window.scrollBy(0,50); // horizontal and vertical scroll increments
        scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}

Answer by mikeymeows

mikeymeowsmikeymeows

It’s not smooth because you’ve got the scroll incrementing by 50 every 100 milliseconds.

change this and the amount you are scrolling by to a smaller number to have the function run with the illusion of being much more ‘smooth’.

turn down the speed amount to make this faster or slower.

function pageScroll() {
    window.scrollBy(0,1);
    scrolldelay = setTimeout('pageScroll()',10);
}

will appear to be much smoother, try it 😉

Answer by Starx

StarxStarx

Smoothly running animations depends on the clients machine. No matter how fairly you code, you will never be satisfied the way your animation runs on a 128 MB Ram system.

Here is how you can scroll using jQuery:

$(document).scrollTop("50");

You might also want to try out AutoScroll Plugin.

Nabin Nepal (Starx) autoscroll jquery
March 15, 2012

jQuery Auto Scroll to DIV ID

Question by H. Ferrence

H. FerrenceH. Ferrence

I have a div id a third of the way down a web page

HTML

<div id="scrollHere"></div>

JavaScript

    <script>
$(document).ready(function(){

var elem = $('#scrollHere');
if(elem) {
    $(window).scrollTop(elem.offset().top).scrollLeft(elem.offset().left);
}

/*
var destination = $('#scrollHere').offset().top;
    $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-75}, 800 );
    return false;
*/
/*
var elem = $('#scrollHere');
if(elem) {

$(window).scrollTop(elem.offset().top).scrollLeft(elem.offset().left);
    //$('html').scrollTop(elem.offset().top);
    //$('html').scrollLeft(elem.offset().left);
}
*/


/*
    var elem = $('#scrollHere');
    if(elem) {
        //$.scrollTo(elem.left, elem.top);
        //$(document).stop().scrollTo( elem.offset().left, elem.offset().top );
    }
*/

}); // end .ready()
    </script>

CSS

#scrollHere{
    position:relative;
    top:500px;
    left:1000px;
    border:1px solid black;
    width:50px;
    height:50px;
}

But I can’t get autoscroll to take me to the div id on page refresh.

Am I using the wrong JavaScript commands?

Answer by Starx

StarxStarx

The most efficient way to achieving this by changing the scrollTop and scrollLeft of the DOM window.

$(window).scrollTop(elem.offset().top).scrollLeft(elem.offset().left);

Demo

...

Please fill the form - I will response as fast as I can!