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