How to Create a Slow Scroll Page Jump in Dreamweaver

Written by marie clay
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Create a Slow Scroll Page Jump in Dreamweaver
Standard HTML anchors jump directly to specified positions without any animation. (Comstock/Comstock/Getty Images)

Adobe Dreamweaver is a powerful and flexible web design tool, allowing users to create content visually as well as with numerous code languages and file formats. The addition of JavaScript to a site can add interactivity and rich content to any page and set your website apart from the competition. Using JavaScript, a standard anchor link can be made to scroll down the page and give a smooth, polished look to your site.

Skill level:
Easy

Other People Are Reading

Instructions

  1. 1

    Download the jquery JavaScript library and JavaScript anchor scrolling code via the link in the Resources section.

  2. 2

    Unzip the "anchor.zip" file and move the "js" folder to the root directory of your website.

  3. 3

    Add the JavaScript libraries to your website to enable calling of functions from the files by typing "<script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.anchor.js" type="text/javascript"></script>" into the "head" section of your page.

  4. 4

    Create a link with a target of "#anchor1" and a class of "anchorLink." When this link is clicked, the page will scroll to the designated anchor. See the Tips section for an example of the code required for this step.

  5. 5

    Create an anchor where you want the page to scroll to. Name the anchor "anchor1" and give an ID of "anchorTarget." See the Tips section for an example of the code required for this step.

  6. 6

    Save the website to keep the changes, then open the page with a browser to confirm the scroll functions properly.

Tips and warnings

  • An anchor link should look like "Click here to scroll down"
  • An anchor should look like " "

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

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