Buy Now ($45) | STT Home | Documentation
Scroll To Top (STT) is an automated Dreamweaver widget that makes scrolling long web pages easier. You can add fixed position arrows, on either the right or bottom edges of your page, that allow users to scroll back to the top of the page, at any time. The arrows remain invisible until the page is scrolled. You can even set the distance that the page is scrolled, before the arrows appear. This feature makes it easy to deploy via Template, Library, or Include—as the arrows will only appear when necessary. Scroll To Top can be easily attached to existing page links. The widget can even create the link for you!
The system can create the STT link for you, or you can assign it to an existing link on your page. We'll explore all of the methods and options.
There are three types of Links that can be created for you. The insertion point (where your cursor is) depends on the type of link you choose to create.
This will create a top facing Arrow Icon positioned on the right side of the page. The icon will be overlaid on top of you page's content so it will always be visible, and clickable, whenever the user scrolls the page downward. In this method, only the arrow is used. The text link is not shown.
Insertion Point: Anywhere on your page. Just be sure not to place your cursor inside an existing hyperlink.
This will create a page-spanning bar that is fixed at the bottom of the browser viewport. The bar will contain an arrow and a text link (which you supply in the Link Text option). The bottom bar is always available, as the page is scrolled downward.
Insertion Point: Anywhere on your page. Just be sure not to place your cursor inside an existing hyperlink.
This will create an STT text link at your insertion point.
Insertion Point: Place your cursor exactly where you want the STT text link to be created. Do not place your cursor inside an existing link.
Click the STT icon in the PVII Section of Dreamweaver's Insert Bar/Insert Panel or choose Insert > Studio VII > Scroll To Top by PVII. The Scroll To Top interface will open.
In this scenario, all three Type options are enabled. You can choose Fixed Arrow on Right, Fixed Bottom Bar, or Normal Page Link.
If you choose Fixed on Right, or Fixed Bottom, the Link Text, Animation, Style, and Top Offset options will be enabled, allowing you to make entries. If you choose Normal Page Link, only the Link Text option will be available. The text you type into the box, will become your actual link text. If you want to, you can accept the default text, Scroll To Top.
If you select Fixed Arrow on Right, or Fixed Bottom Bar, all options are available.
Click OK to complete the creation process.
This is so easy! Place your cursor inside the link text and open the SST interface. The screen capture below, shows the UI with an existing link selected.
Simply click OK to complete the process.
This is easy, too! Before you begin, make sure you have first made your image a link. To do so, select the image and type a hash symbol into the link box on Dreamweaver's property inspector. Once your image is a link, you can proceed.
Select the image link and open the SST interface. The screen capture below, shows the UI with an existing image link selected.
Note that the Link Text box contains the source code of your image. Do not edit the code. Simply...
Click OK
That's all there is to it. STT is a very powerful too. But it's also extremely easy to use.
Let's cover some other useful things you should know.
The system creates an assets folder named p7stt at the same level as the page that contains your menu. This folder will contain the STT JavaScript file and the relevant style sheet.
When you publish your site, make sure you upload the entire p7stt folder.
These option will only be available for the Fixed Arrow on Right and Fixed Bottom Bar options. They will not apply to "normal page links".
The Scroll To Top action can be animated using a smooth slide to the top of the page, or you can turn this animation completely off to have an instant jump to the top of the page.
This option allows you to control the animation speed. Duration defines the total amount of time that the animation will run, in milliseconds, regardless of a page's dimensions. The default 450 is fine in most cases. Lower the Duration setting and the animation will be faster. Raise the setting to make the animation slower.
STT comes with two pre-defined CSS style themes. Choose the theme that best matches the design of your page.
This controls the point at which the Scroll To Top link become visible on your page. With the default amount of 200px, the STT icon will become visible whenever the page is scrolled downward by more than 200 pixels.
We have included a special style class, in the STT style sheet that you can use to customize your STT normal page links. This class does not apply to the fixed position options. The class is called:
.p7STT-scroll-to-top
Use your preferred CSS editor to customize the appearance of your STT links.
STT does not have a Modify interface. It really does not need one. The primary options you may want to change are Style Theme and position. There are two choices for theme: light or dark. And there are two choices for position: right or bottom. These are assigned via CSS class on the fixed-position links. To change the theme, locate the STT DIV. It will be at the top of your page markup:
<div id="p7STT_2" class="p7STT right dark"> <a id="p7STTa_2" class="p7STT-anchor" href="#"><i></i><span>Scroll To Top</span></a>
<script type="text/javascript">P7_STTop('p7STT_2',300,1,450)</script>
</div>
Change the class names to suit. For example:
<div id="p7STT_2" class="p7STT bottom light"> <a id="p7STTa_2" class="p7STT-anchor" href="#"><i></i><span>Scroll To Top</span></a>
<script type="text/javascript">P7_STTop('p7STT_2',300,1,450)</script>
</div>
Happy scrolling!