locked
Scrolling page effect, help! RRS feed

  • Question

  • User771087414 posted

    Hi all,

    Im quite new to Ajax...

    I was wondering if and how is possible achieve the scrolling page effect that I found on this website:

    http://www.bahiastudio.com.ar/

    I didnt find any similar effect in the ajax toolkit stuff... 

    Thanks in advance!

    Maurizio

    Monday, April 21, 2008 11:23 AM

Answers

  • User-1063239682 posted

    Ok, I have created a full test page that works, I have modified the script a little to work both way scrolling, take a look, and tell me if you have questions.

    I am pasting here the FULL HTML Page. Please copy paste into an external HTML file (you can do it with notepad but save it as .html and not .txt) and test it yourself .

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Test</title>
    </head>
    
    <script type="text/javascript" language="javascript">
    <!--
        function scrollto(fromElementID, toElementID)
        {
            var fromScroll = document.getElementById(fromElementID).offsetTop;
            var toScroll = document.getElementById(toElementID).offsetTop;
            
            var scrollDif = toScroll - fromScroll;
            alert(scrollDif);
            
            if (scrollDif > 0) // scroll down
            {
                while (scrollDif > 0)
                {
                    window.scrollBy(0, 10);
                    scrollDif -= 10;
                }
            }
            else // scroll up
            {
                while (scrollDif < 0)
                {
                    window.scrollBy(0, -10);
                    scrollDif += 10;
                }
            }
        }
    //-->
    </script>
    
    <body>
        <div id="top"></div>
        <a href="javascript:scrollto('top', 'bottom');">From Top to Bottom</a>
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        <div id="bottom"></div>
        <a href="javascript:scrollto('bottom', 'top');">From Bottom to Top</a>
    </body>
    </html>
    
     
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 22, 2008 8:06 AM

All replies

  • User-1063239682 posted

    You do not need Ajax for this. This is purely a client side javascript effect.

    I have written this function myself and you can find similar to it on the net.

    This is a javascript function, pass it the ID of any HTML Element and it should scroll smoothly to it.

    Note that $get is function from the ajax library, if it does not work, replace it with document.getElementById

    function scrollto(id) 
    { 
        var toScroll = $get(id).offsetTop;
        while (toScroll > 0)
        {
            window.scrollBy(0, 10);
            toScroll -= 10;
        }
    } 
    

     

    Hope this helps.

    Monday, April 21, 2008 12:30 PM
  • User771087414 posted

    hi,seems not working...

    where's my mistake?

    here's the script:

    <script type="text/javascript" language="javascript">

    <!--

    function scrollto(BD)

    {

    var toScroll = document.getElementById(BD).offsetTop;

     

    while (toScroll > 0)

    {

    window.scrollBy(0, 10);

    toScroll -= 10;

    }

    }

    //--></script>

    where BD is the id that I assigned to the body tag, coz i want all the page to scroll.

    this is how i linked the script to a link:

    <a href="javascript:scrollto()">scroll</a>

    By the way is this script work to scroll up or down?

    Hope u can help me.....[:D]

    Thanks,

    Maurizio

    Monday, April 21, 2008 1:20 PM
  • User-1063239682 posted

    the script looks ok, however you should not add the id to the body tag, and when you are calling the function you are not passing anything.

    try this

    Add two divs, one on the top of your page <div id="top"></div> and one in the bottom of your page <div id="bottom"></div>

    Then try calling your function scrollto like this:

    <a href="javascript:scrollto('top')">scroll to top</a>

    <a href="javascript:scrollto('bottom')">scroll to bottom</a>

    The function will scroll from any position you are to the element that it's id you have specified, so depending on where you are and where the element is, the scrolling will be up or down.

    Let me know.

    Tuesday, April 22, 2008 5:45 AM
  • User771087414 posted

    still not working...here's the code:

    <script type="text/javascript" language="javascript">

    <!--

    function scrollto()

    {

    var toScroll = document.getElementById(top).offsetTop;

     

    while (toScroll > 0)

    {

    window.scrollBy(0, 10);

    toScroll -= 10;

    }

    }

    Where do I have to call the 'top' or 'bottom' id in the script above? 

    and here's the link:

    <a href="javascript:scrollto('top')">

    let me know...

    Many thanks,

    Maurizio

    Tuesday, April 22, 2008 6:32 AM
  • User-1063239682 posted

    replace this text:

    function scrollto()

    {

    var toScroll = document.getElementById(top).offsetTop;

     

    with (changes in Italic, Bold)

     

    function scrollto(elementID)

    {

    var toScroll = document.getElementById(elementID).offsetTop;  

     

     

    Tuesday, April 22, 2008 6:40 AM
  • User771087414 posted

    You mean something like this below?

    <script type="text/javascript" language="javascript">

    <!--

    function scrollto(top)

    {

    var toScroll = document.getElementById(top).offsetTop;

     

    while (toScroll > 0)

    {

    window.scrollBy(0, 10);

    toScroll -= 10;

    }

    }

    //-->

    </script>

    Link:

    <a href="javascript:scrollto(top)">

    I dont know what Im doing wrong but still not working...[:'(]

    Help please....!

    Thx

    M

    Tuesday, April 22, 2008 6:55 AM
  • User-1063239682 posted

    One more thing left (assuming you added the two divs like I asked you before)

    instead of 

    <a href="javascript:scrollto(top)">

    You should add single quotes around the word top here because it is a string and not a variable

    <a href="javascript:scrollto('top')">

    You need to brush up on your javascript :)

     

    Tuesday, April 22, 2008 7:11 AM
  • User771087414 posted

    Yes, I added the two divs as u asked, and tried with the single quotes as well in the <a href="javascript:scrollto('top')" >

    if you colud have a look to the script once again, maybe there's something wrong in the function itself...

    <script type="text/javascript" language="javascript">

    <!--

    function scrollto(top)

    {

    var toScroll = document.getElementById(top).offsetTop;

     

    while (toScroll > 0)

    {

    window.scrollBy(0, 10);

    toScroll = 10;

    }

    }

    //-->

    </script>

    By the way this is the url of the website: www.doctorcult.com, in the footer at the bottom there's the link that should scroll up to the top...

    Thx a lot

    M

    Tuesday, April 22, 2008 7:32 AM
  • User-1063239682 posted

    Ok, I have created a full test page that works, I have modified the script a little to work both way scrolling, take a look, and tell me if you have questions.

    I am pasting here the FULL HTML Page. Please copy paste into an external HTML file (you can do it with notepad but save it as .html and not .txt) and test it yourself .

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Test</title>
    </head>
    
    <script type="text/javascript" language="javascript">
    <!--
        function scrollto(fromElementID, toElementID)
        {
            var fromScroll = document.getElementById(fromElementID).offsetTop;
            var toScroll = document.getElementById(toElementID).offsetTop;
            
            var scrollDif = toScroll - fromScroll;
            alert(scrollDif);
            
            if (scrollDif > 0) // scroll down
            {
                while (scrollDif > 0)
                {
                    window.scrollBy(0, 10);
                    scrollDif -= 10;
                }
            }
            else // scroll up
            {
                while (scrollDif < 0)
                {
                    window.scrollBy(0, -10);
                    scrollDif += 10;
                }
            }
        }
    //-->
    </script>
    
    <body>
        <div id="top"></div>
        <a href="javascript:scrollto('top', 'bottom');">From Top to Bottom</a>
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        Anything <br />        
        Anything <br />    
        <div id="bottom"></div>
        <a href="javascript:scrollto('bottom', 'top');">From Bottom to Top</a>
    </body>
    </html>
    
     
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 22, 2008 8:06 AM
  • User-1063239682 posted

    If you want, send me your email I will email you the file attached.

     

    Tuesday, April 22, 2008 8:07 AM
  • User771087414 posted

    Hi, Thanks,

    I created a new html file with the code you provided, it works, but each time i click on one of the link to scroll up or down a warning pop-up message appear saying "1976"....

    is it a kind of protection..?

    by the way my mail is maurizioliberato@gmail.com

    Thx

    M

    Tuesday, April 22, 2008 8:32 AM
  • User771087414 posted

    oh ive uploaded the page here:

    http://www.doctorcult.com/test.htm

    Tuesday, April 22, 2008 8:33 AM
  • User771087414 posted

    Now works! I found out how to manage the test page you made!

    Thanks, you are my javascript guru!!!

    I owe you a favor!!!

     Maurizio[:D]

    Tuesday, April 22, 2008 9:13 AM
  • User-1063239682 posted

    Glad it works :)

    The message was an alert that you can comment out in your code, I was just using it for testing purposes.

    Let me know if you still need anything.

    Tuesday, April 22, 2008 9:37 AM