Scroll To Top
Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Buy Now ($45) | STE Home | Documentation

Scroll To ElementThe Ultimate Responsive and Adaptive Widgets for Dreamweaver

PVII Scroll to Element (STE)

Scroll To Element (STE) is an automated Dreamweaver widget that makes scrolling long web pages easier. Scroll To Element can be easily attached to existing page links. The widget can even create the link for you! STE allows you to create links that scroll smoothly to ID'd elements anywhere on your page. The tool can create the link for you, or you can assign an STE action to an existing link on your page

There are four ways to use the tool:

  1. Select an existing text or image link on your page
  2. Place your cursor where you would like to insert a new link
  3. Select a string of text
  4. Select an image

Before you begin, you will need to assign ID's to the page elements you want to target. For this example page, each Section heading is assigned an ID:

<div id="section-1" class="row one">
<div id="section-2" class="row one">
<div id="section-3" class="row one">
<div id="section-4" class="row one">

When the system assigns, or creates a link, the action is driven via a class name assignment, an HREF attribute, and an optional Data attribute, if you choose an offset.

<a href="#section-1" class="p7STE-scroll-to-element" data-top-offset-id="header">Intro</a>

Editing Links

The system UI has a create mode, and a Modify mode. Once a link is created, you can easily change the target ID, Link Text, or Offset, by selecting your link and opening the UI.

Removing Links

To remove an STE link, use the Remove button in the Modify UI.

The STE UI

Link Text

The Link Text box is editable. If you are using an insertion point that is not inside an existing link, the default Scroll To Element text will appear in the box. If, on the other hand, you have opened the UI, with an existing link having been selected, the Link Text will be the text of your existing link.

Element ID

The Element ID box is where you enter the ID of the target element... the element to which you would like to scroll to when the link is clicked. The ID you enter into the box will become the HREF attribute of your link.

Offset Adjustment

There are two ways you can set Offset Adjustment:

Height of Page Element with ID

This is useful if you are using a fixed-position element at the top of your page—as we are doing on this page. Simply enter the ID of the element and PVII Scroll to Element will take care of the rest.

If you would like to disable Offsets for Smartphones

There may be times when you want an offset for conventional browsers, but need to disable it for smartphones. This would be the case if you were using a fixed-position set of links, housed in a menu, such as Pop Menu Magic, or Drop Menu Magic, and your menu is set to a fixed-scroll configuration. In that scenario, the menu would convert to a non-fixed accordion in phones, and the offset would be a problem. To disable offset, use the following media query:

@media only screen and (min-width: 0px) and (max-width: 700px) {
.p7STE-scroll-to-element {max-height: 700777px;}
}

Adjust the min/max width settings to suit. While Scroll to Element does not have its own style sheet, you can add as many media queries as you want to any style sheet attached to your page.

Fixed Pixel Amount

Enter a pixel value, which translates to a fixed space between the top of your target element and the top of the browser window/viewport. The option accepts positive and negative values. Negative values scroll the page up, positive values scroll the page down. You can use this option to move your page in small, precise increments.

When you are done in the UI, click OK to create your link.

Note: In all cases, offset settings are ignored if the target element is already at the top of your page. In other words, a page can never be scrolled past its top.

Edit or Modify Existing STE Links

Once a link is created, you can easily change the target ID, Link Text, or Offset, by selecting your link and opening the UI.

Removing Links

To remove an STE link, use the Remove button in the Modify UI.

What will be Removed?

The link you selected will be removed. The target element will not be affected.

If the link you remove is the only link on your page, then the command will also remove the link to the STE JavaScript file, as well.

Workflow

Before you use the STE tool, make sure that the target elements, the elements that will be scrolled to, are assigned IDs. Make note of the IDs, as they will need to be entered into the STE interface.

What does an ID look like?

An ID is assigned to a tag. This is an example of an ID assigned to an H4 tag:

<h4 id="products">Test Heading</h4>

Is there an easy way to create an ID?

Yes. Dreamweaver's Property Inspector contains an ID box. To use it, select an element and type an ID into the box.