0

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;
5
Contributors
7
Replies
8
Views
9 Years
Discussion Span
Last Post by serkan sendur
0

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......

0

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>

0

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.

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.