Text effects in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

Smooth scroll back to the page top

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time


As you move down the page the "page top scroll" arrow will fade in, you can set that position
when you click on the image it will scroll back to the top, you can set the speed
Designers use this nice smooth effect for long pages instead a named anchor that jumps quickly
I use named anchors on the WSnext pages (center bottom arrow) see the named anchor page for those

I'm using a few images of WWII B17, B24 and Corsair's over my local Golden Gate bridge for this example
As you scroll down the page on the bottom right an "up arrow" will appear, click on it to scroll back to the top
By the way I'm using a CSS3 code from misc css tips 2 for the images if you wanted to learn how to do those.

WWII planes over the Golden Gate Bridge
Hover images for more info

F4U Corsair
Serving primarily in the Pacific Theatre with the US Navy, US Marine Corps, Royal Navy and Royal New Zealand Airforce, Corsairs flew 64,051 combat sorties destroying almost 3,000 Japanese aircraft with a loss of only 189 of their own!

B-17 Flying Fortress
Numerous reports of the plane sustaining heavy battle damage, with engines missing, parts being blown away and even mid-air collisions and yet returning her crews home safely have all added to the legendary status of the B-17.

B-17 Flying Fortress
A total of 12,731 B-17s were made 47 still survive intact, and 10 of these are currently flying.

B-24 Liberator
B-24 was made for precision bombing, it used the Norden bomb sight to make tactical strikes on bridges, bases, and railroads. The plane had a crew of ten and a max speed of 300 mph. It could fly 2,850 miles.

B-17 Flying Fortress one of several named "Liberty Belle"
The B17 served in dozens of units in theaters of combat throughout World War II. Its main use was in Europe where its shorter range and smaller bombload, relative to other aircraft available, did not hamper it as much as in the Pacific Theater.

VMA-214 squadron is known for Colonel Gregory "Pappy" Boyington, whose memoirs also inspired the 1970s television show Baa Baa Black Sheep
Autumn, 1945... For countless American boys who sailed off to war in the Pacific, the Golden Gate Bridge was their last sight of home. Many would never return. In this scene, Operation Magic Carpet, transporting many thousands of American troops home, several F4U Corsairs roar past from the "Black Sheep", based in California at this time.

The page top scroll picture

We are going to use a web studio "protected graphic"
so you can use this on as many pages as you like

Place the picture on each page you want to use this
and put it as far down the page you want it to "fade in"
We'll actually hide it and position it with the code but we can use web studio for some info this way.

On the "Insert tab" in "Illustrations"
select the drop down arrow then
"Protected Graphic from File" button

Add a style to the HEAD

20px is how far from the bottom of the page the arrow will fade in (we'll put how far down the page it fades in a bit)
right is the side of the page you want the arrow, if you want it on the left side change that to left
24px is how far from the side of the page the arrow will fade in
uparrow.gif HAS TO BE CHANGED that is the name of the image you use, like arrow.jpg or what ever it is you are using

<style type="text/css">
/* === WSnext scroll to top === */
background: url(_RefFiles/uparrow.gif) no-repeat;}

In Insert Page HTML Copy/Paste this code in the HEAD

Add this class to the Picture


Select the image then on the
HTML tab in Insert Object HTML
select Inside Object 
and copy/paste this

Press "OK" to save

Place the code to make it work on your page

Press "OK"
to save

on the HTML Object
and paste the code below

That puts the HTML
container on the page

On the Html tab
in Add HTML
HTML Object

Copy / Paste this in the HTML Object:

Tip: If you double click on your picture and look at
the "top" position that will tell you the approx. number you want the image to fade in from the top of the page

400 is the number you put in for how far down the page you want the image to fade in when the page is scrolled
1600 is the speed it will scroll back up to the top, a higher number is slower lower is faster. 800 for example is faster

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script language="javascript" type="text/javascript">
$(function() {
if ($(this).scrollTop() > 400) {
} else {
$("html, body").animate({ scrollTop: 0 }, 1600);
return false;


Text effects in Web Studio 5 - Smooth configurable scroll back to the page top - by Web Studio Next

Use inside object to<BR>add the class name