scroll smoothly

serkan sendur 0 Tallied Votes 186 Views Share

when you have long web pages, your users may be confused scrolling within your pages because built-in javascript scrollIntoView method makes the page move suddenly.
ScrollToControl method moves slowly enabling the user to keep track of where he/she is going.

function elementPosition(obj) {
        var curleft = 0, curtop = 0;

        if (obj.offsetParent) {
            curleft = obj.offsetLeft;
            curtop = obj.offsetTop;

            while (obj = obj.offsetParent) {
                curleft += obj.offsetLeft;
                curtop += obj.offsetTop;
            }
        }

        return { x: curleft, y: curtop };
    }

  function ScrollToControl(id)
        {
            var elem =  document.getElementById(id);
            var scrollPos = elementPosition(elem).y;
            scrollPos = scrollPos - document.documentElement.scrollTop;
            var remainder = scrollPos % 50;
            var repeatTimes = (scrollPos - remainder) / 50;
            ScrollSmoothly(scrollPos,repeatTimes);
            window.scrollBy(0,remainder);
        }
        var repeatCount = 0;
        var cTimeout;
        var timeoutIntervals = new Array();
       
        var timeoutIntervalSpeed;
        function ScrollSmoothly(scrollPos,repeatTimes)
        {
                if(repeatCount < repeatTimes)
                {
                window.scrollBy(0,50);
                }
                else
                {
                repeatCount = 0;
                clearTimeout(cTimeout);
                return;
                }
        repeatCount++;
        cTimeout = setTimeout("ScrollSmoothly('" + scrollPos + "','"+ repeatTimes +"')",10);
        }

example usage : 
ScrollToControl('elementID');
it moves to the control smoothly;
yoursram 0 Newbie Poster

good

riaz1983 0 Newbie Poster

Hi,
I am very new to php and js.I require the above coding to be used in my task .For using the above java script code snippets how should i write the php coding..and how should i call the functions above ..Kindly help me....

THanks in advance......

serkan sendur 821 Postaholic Banned

hi riaz, you dont need to involve php to use this javascript. Javascript executes on the client machine whereas php executes on the server. This kind of user interface involved jobs are handled by javascript since no server interaction is required. To use this script just add this script to head section of your page then set your html element id(to which element you want to scroll), then call the ScrollToControl function like this from any of the links or buttons as follows :
<a href="javascript://" onclick="ScrollToControl('elementId');">sample</a>

Mohan0704 0 Newbie Poster

I mean, do you absolutely need it?

If it's worth it, then yes.

If it's not, then no.


Sure, you can do that, but don't other people want less complicated scripts?

Also, if an error happens, how do you fix it?
It's pretty long, you know.

serkan sendur 821 Postaholic Banned

hi Mohan0704, it is worth it, that is why facebook follows the same pattern when scrolling.

ayesha789 7 Posting Pro in Training

How I can use this. its not working . please guide me.

serkan sendur 821 Postaholic Banned
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.