How to Create Scrolling Text With Javascript

Written by tony myles Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Create Scrolling Text With Javascript
JavaScript adds dynamic properties to the content of Web pages. (Internet image by arabesque from

JavaScript is a website development language used to create a variety of text, graphic, video and hyperlink effects on Web pages. Many JavaScript actions can also be accomplished through HTML coding, yet JavaScript is a more recognisable computing language among the different browsers people utilise to create websites. JavaScript still needs a HTML source to embed into, including when an individual wants to make text scroll from up and down or side to side.

Skill level:


  1. 1

    Open a program that can edit the code of your Web page, such as Windows Notepad.

  2. 2

    Locate and click into the specific area of your Web page after the <BODY> tag where you want the script to run.

  3. 3

    Type the following data into your HTML code to begin the script, experimenting with the numbers below to vary the speed and position of your script:

    <script language="JavaScript">

    var pos=100;

    function Scroll() {

    if (!document.getElementById) return;


    pos -=1;

    if (pos < 0-obj.offsetHeight+130) return;;





  4. 4

    Continue the script by defining your content, replacing the generic text with the intended message:

    <body on Load="Scroll();">

    <div id="thewindow" style="position:relative;width:180;height:150;

    overflow:hidden; border-width:2px; border-style:solid; border-colour:red">

    <div id="thetext" style="position:absolute;width:170;left:5;top:100" >

    <p>This is the first paragraph of the scrolling message. The message

    is created with ordinary HTML. Entries within the scrolling area can use any HTML tags. </p>

    <p><b>[<a href="JavaScript:pos=100;Scroll();">Start Over</a>]</b></p>




  5. 5

    Save and publish the Web page online.

Tips and warnings

  • Text scrolling is available in many different formats, such as those listed at The JavaScript Source.
  • Test your finished page with a variety of Web browsers to ensure the script works properly.
  • Some JavaScript requires a script be placed in the header of the HTML document.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.