WebSite X5Help Center

 
Francois R.
Francois R.
User

Using back to top scroll button and jQuery  en

Author: Francois R.
Visited 3786, Followers 3, Shared 0  

I'd like to understand how to use a dynamic scrooling button for long pages. Something with jQuery like this:

http://mattvarone.com/web-design/uitotop-jquery-plugin/

or this

http://www.developerdrive.com/2013/07/using-jquery-to-add-a-dynamic-back-to-top-floating-button-with-smooth-scroll/

It would be good to have tutorials like this to better understand Website X5.

Thanks,

François

Posted on the
5 ANSWERS - 1 USEFUL
Francois R.
Francois R.
User
Author

Seriously, nobody from Incomedia to answer this?

The scrolling thing should be implemented in Website X5 anyway as this is a must have tool if you have a lot of text on a page!

Read more
Posted on the from Francois R.
Francois R.
Francois R.
User
Author

Thanks. I've sussed it out on my own. Procedure as follows using Matt Varone's script:

Quick tutorial to get a jQuery scroll back to top dynamic button

Go to: http://mattvarone.com/web-design/uitotop-jquery-plugin/

- Download the package (button Download). Decompress the zip archive and upload the folders /css, /img and /js to the root of your website.

- In Website X5, got to 2 Map Creation. Select the page where you want to add the scroll button. Click on the button 'Properties' (right menu).

- Click on the tab 'Expert'.

- Select 'After opening the HEAD tag' under 'Custom Code'. Enter the following text:

<meta charset="utf-8"/>
<title>UItoTop jQuery Plugin - Matt Varone</title>
<meta name="author" content="www.mattvarone.com">
<link rel="stylesheet" media="screen,projection" href="css/ui.totop.css" />
<meta name="viewport" content="width=device-width; initial-scale=1"/>

- Select 'Before closing the BODY tag' under 'Custom Code'. Enter the following text:

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/easing.js" type="text/javascript"></script>
<script src="js/jquery.ui.totop.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/

$().UItoTop({ easingType: 'easeOutQuart' });

});
</script>

- Click on 'OK' to close editing. Save and upload the page to your website.

NOTE: The preview function in Website X5 cannot render the button, but it will work if the files have been properly uploaded to the root of your website.

You can see the result here:

http://lab.mattvarone.com/projects/jquery/totop/

or on my website here:

http://lab.mattvarone.com/projects/jquery/totop/

Cheers!

Read more
Posted on the from Francois R.
Der Zwoemti
Der Zwoemti
Moderator

it´s to much code!

You need only a few lines...

<script>
_jq(function() {
var elem = '<img
onclick="return x5engine.utils.location(\\'\\')" id="ScrollToTop" alt=""

Read more
Posted on the from Der Zwoemti
Der Zwoemti
Der Zwoemti
Moderator

sorry i cant post code here...

Read more
Posted on the from Der Zwoemti