Premium Templates
Image Galleries
Image Effects
Video Players
Audio Player
Other Effects
Copyright © Flying Cow Labs All Rights Reserved.
Website crafted using the Serif Software Suite
If you’ve found these tutorials useful please help the world's poorest communities
by making a small donation to WaterAid -
Smooth Scrolling Tutorial
Achieve a scrolling action to navigate a single web page with your WebPlus website.
Very popular with modern and professional sites, you can build a website that sits within a single page and scrolls elegantly to anchors placed throughout the page.
1. The download above only contains a WebPlus file with the HTML fragments from this tutorial included in it, there are no other files to download as the script that will be added to the head of your site, contains a direct link to the jQuery.js file via Google. There is no real need to download the WebPlus file unless you are having troubles or wish to see how things are done within the WebPlus site.
2. Include the following script in the head of the master page or the page you wish to have the scrolling action.
Copy and paste > Insert > Web Object > HTML > Paste to Head
3. Next set up the anchors that will become your scrolling navigation. Attach the following script to the Body of your page, and place it where you want the page to scroll too.
Copy and paste > Insert > Web Object > HTML > Paste to Body
Substitute ANCHOR NAME for the name of you navigation ie. ‘Services’
4. Now you need a hyperlink to point at your anchor. Set hyperlink as an Internet page http://yourdomain.com/#ANCHOR NAME (keep the # before the anchors name)
And that’s it!
Speed adjustment
On this line in the script:
.animate({scrollTop: targetOffset}, 1000);
Adjust the number to higher for a slower scroll effect, 5000 makes for r-
Any problems visit the Forum