PVII Scroll To Top

Overview

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.

Scrolling is animated.

Scroll To Top can be easily attached to existing page links. The widget can even create the link for you!

Inserting a New Scroll To Top Link

-Click inside an existing page link, or click on the page where you want to add the Scroll To Top link. If you are using the Fixed Arrow on Right or Fixed Bottom Bar options, the insertion point does not matter. Simply click anywhere on the page.

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

Classic Dreamweaver Insert Bar

The Insert Bar

Note: Some newer versions of Dreamweaver will only able to display icons in shades of gray, rather than in color. Dreamweaver CC does away with the Insert Bar but the programmers left a back door, which is explained in this tutorial.

Dreamweaver Insert Panel

CS4 Insert Panel

The Scroll To Top interface will open.

The Create Interface

You can create multiple STT links on your page. Add as many as you like.

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.

PMM file folder

When you publish your site, make sure you upload the entire p7stt folder.

Managing the User Interface Items

Type

The Scroll To Top link can be created in one of three ways:

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 your page's content so it will always be visible, and clickable, whenever the user scrolls the page downward.

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.

Normal Page Link

Use this option to assign the Scroll To Top action to any link on your page. There are two ways to create this link:

Click inside an existing link on your page and click the Scroll To Top icon. The interface will recognize that you are inside an existing link and populate the Link Text box with the existing text of your link. Click OK and the Scroll To Top action will be assign to that link.
Create a new link by clicking a spot on your page. Click the Scroll To Top icon and the interface will open with the Normal Page Link option already selected. Supply your Link Text and then click OK to create a new Scroll To Top link.

Link Text

Supply the text for the Scroll To Top link.

Note: The link text will not be visible when choosing the Fixed Arrow in Right option, only the Arrow Icon will be visible.

Options

These settings are applied to the STT menu you are currently creating. Other instances on the same page will not be affected and will retain their unique options.

Note: 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.

Animation Methods

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.

Command Buttons

OK

When you are done setting your desired options, click the OK button to build the menu. The system will verify your selections and alert you to any problems that need your attention. If there are no problems, the interface will close and the STT will be added to your page.

Cancel

Click the Cancel button to completely abort the current operation. This will close the interface and no changes will be made to your page.

Help

Click the Help button to open the associated Help File in your browser. This page can remain open for easy reference while you continue working in the STT interface.