Using jQuery: Scroll to Top Example

Instead of abruptly moving the user straight to the top of a page, jQuery can be used to scroll the user to a location on the page more smoothly.

This article is derived from a tutorial from Paulund and altered for use on the Synergy 8 platform.

View the demo.

Include jQuery

jQuery can be included in your design by adding the following code into the <head> section of your design template:

Add The "Scroll to Top" Script

Add the following code after the opening <body> tag in your design:

Add The "Scroll to Top" Button

Add the following link, which will act as the scroll to top button.

  • Button code
  • CSS styling

jQuery.noConflict

It is important to note that Synergy 8 uses jQuery.noConflict() to allow compatibility with other libraries that steal the ‘$’ variable - https://api.jquery.com/jQuery.noConflict/

You may want to wrap your code in a function to gain access to the $ variable.

Note: Use of other javascript frameworks is possible, but not recommended due to performance.

The Synergy 8 Script Control

It's recommended that the <ss:standard:script /> tag is used instead of a standard HTML <script> tag. It's also good practise to specify where the script will be placed in the rendered HTML by defining the at="body", at="head" or at="jqdomready" attribute.

Click here to view the API reference for the <ss:standard:script /> control.

Determining the Version of jQuery

You can view the source of the page to determine the current version of jQuery that Synergy 8 is serving when combined with its controls. This version may change over time, however this should not matter as a compatibility layer is included automatically.