How to Create a Slow Scroll Page Jump in Dreamweaver

Save

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.

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

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

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

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

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

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

Tips & Warnings

  • An anchor link should look like "<a href = "#anchor1" class = "anchorLink">Click here to scroll down</a>"
  • An anchor should look like "<a name = "anchor1" id = "anchorTarget"> </a>"

References

  • Photo Credit Comstock/Comstock/Getty Images
Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!