Buy Now ($45) | STE Home | Documentation
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:
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>
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.
To remove an STE link, use the Remove button in the Modify UI.
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.
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.
There are two ways you can set Offset Adjustment:
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.
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.
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.
Once a link is created, you can easily change the target ID, Link Text, or Offset, by selecting your link and opening the UI.
To remove an STE link, use the Remove button in the Modify UI.
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.
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.
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>
Yes. Dreamweaver's Property Inspector contains an ID box. To use it, select an element and type an ID into the box.