script.aculo.us ScrollTo Effect

Last Updated : 23 Nov, 2020

In this article, we will demonstrate the effect of ScrollTo by using JavaScript library called script.aculo.us having smooth transition from one to another. We can adjust the duration of the effect as well.

Syntax:

Effect.ScrollTo('element_id', { duration:'0.2', offset:-20 });

Note: To use this library, we are supposed to install the library and then use it in our programs. And to do so you can follow this link http://script.aculo.us/downloads.

Approach: To demonstrate the use of this function, we have written a small piece of code. We have written a small JavaScript function named ShowEffect() method which uses Effect.ScrollTo() method of this library. By clicking on Click me to Scroll!, you will see the effect clearly.

Example: To see the effect, first download the library and then open this program in local environment.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script type="text/javascript" 
        src="prototype.js"> 
    </script> 
  
    <script type="text/javascript" 
        src="scriptaculous.js"> 
    </script> 
  
    <script type="text/javascript"> 
  
        function ShowEffect(element) { 
            new Effect.ScrollTo(element,  
            { duration: '0.2', offset: -20 }); 
        }           
    </script> 
</head> 
  
<body> 
    <h2>script.aculo.us Effect.ScrollTo</h2> 
    <p> 
        JavaScript is a lightweight, cross-platform  
        and interpreted scripting language.<br /> 
        It is well-known for the development of web  
        pages, many non-browser environments also  
        use it.<br />JavaScript can be used for  
        Client-side developments as well as  
        Server-side developments.<br /> 
    </p> 
  
    <p> 
        <b>Features of JavaScript:</b> According to 
        a recent survey conducted by Stack Overflow, 
        <br />JavaScript is the most popular language  
        on earth.<br />With advances in browser  
        technology and JavaScript having moved into  
        the server<br />with Node.js and other  
        frameworks, JavaScript is capable of so much  
        more.<br /> Here are a few things that we can  
        do with JavaScript:<br /> 
    </p> 
  
    <p> 
        JavaScript was created in the first place 
        for DOM manipulation.<br /> Earlier websites  
        were mostly static, after JS was created 
        dynamic Web sites were made.<br /> Functions  
        in JS are objects. They may have properties  
        and methods just like another object.<br /> 
        They can be passed as arguments in other  
        functions.<br />Can handle date and time.<br /> 
        Performs Form Validation although the forms are 
        created using HTML.<br />No compiler needed.<br /> 
    </p> 
  
    <p> 
        JavaScript is a lightweight, cross-platform and 
        interpreted scripting language.<br /> 
        It is well-known for the development of web pages, 
        many non-browser environments also use it.<br /> 
        JavaScript can be used for Client-side 
        developments as well as Server-side  
        developments.<br /> 
    </p> 
  
    <p> 
        <b>Features of JavaScript:</b> According 
        to a recent survey conducted by Stack  
        Overflow,<br /> JavaScript is the most  
        popular language on earth.<br /> 
        With advances in browser technology and 
        JavaScript having moved into the server<br /> 
        with Node.js and other frameworks, 
        JavaScript is capable of so much more.<br /> 
        Here are a few things that we can do 
        with JavaScript:<br /> 
    </p> 
  
    <p> 
        JavaScript was created in the first place 
        for DOM manipulation.<br /> Earlier websites 
        were mostly static, after JS was created  
        dynamic Web sites were made.<br /> 
        Functions in JS are objects. They may have 
        properties and methods just like another 
        object.<br /> They can be passed as arguments  
        in other functions.<br /> Can handle date  
        and time.<br />Performs Form Validation  
        although the forms are created using HTML.<br /> 
        No compiler needed.<br /> 
    </p> 
  
    <p> 
        JavaScript is a lightweight, cross-platform 
        and interpreted scripting language.<br /> 
        It is well-known for the development of 
        web pages, many non-browser environments 
        also use it.<br /> JavaScript can be used 
        for Client-side developments as 
        well as Server-side developments.<br /> 
    </p> 
      
    <p> 
        <b>Features of JavaScript:</b> According to a 
        recent survey conducted by Stack Overflow,<br /> 
        JavaScript is the most popular language on  
        earth.<br />With advances in browser technology  
        and JavaScript having moved into the server<br /> 
        with Node.js and other frameworks,JavaScript is 
        capable of so much more.<br />Here are a few  
        things that we can do with JavaScript.<br /> 
    </p> 
      
    <p> 
        JavaScript was created in the first place for 
        DOM manipulation.<br /> Earlier websites were 
        mostly static,after JS was created dynamic  
        Web sites were made.<br />Functions in JS are  
        objects. They may have properties and methods  
        just like another object.<br />They can be  
        passed as arguments in other functions.<br /> 
        Can handle date and time.<br /> 
        Performs Form Validation although the forms are 
        created using HTML.<br /> 
        No compiler needed.<br /> 
    </p> 
      
    <p> 
        JavaScript is a lightweight, cross-platform and 
        interpreted scripting language.<br /> 
        It is well-known for the development of web pages, 
        many non-browser environments also use it.<br /> 
        JavaScript can be used for Client-side developments 
        as well as Server-side developments.<br /> 
    </p> 
      
    <a href="#" onclick="ShowEffect('h2'); return false;"> 
        Click me to scroll! 
    </a> 
</body> 
  
</html> 