Buy Now ($45) | STT Home | Documentation

Scroll To Top The Ultimate Responsive and Adaptive Widgets for Dreamweaver

Overview

Inserting a Scroll To Top Link

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.

1. Having STT Create your Link

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.

Fixed Arrow on Right

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.

Fixed Bottom Bar

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.

Normal Page Link

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.

Open the Interface

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.

2. Assigning STT to an Existing Link on your Page

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.

3. Assigning STT to an Existing Image Link on your Page

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.

Additional Details

Let's cover some other useful things you should know.

Asset Folders

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.

Options

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

Animation

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.

Duration

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.

Style

STT comes with two pre-defined CSS style themes. Choose the theme that best matches the design of your page.

Top Offset Detection Amount

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.

Styling Normal STT Page Links

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.

Changing Style Themes

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!