WebSite X5Help Center

 
Francois R.
Francois R.
User

Using back to top scroll button and jQuery  en

Autor: Francois R.
Visitado 3971, Seguidores 3, Compartilhado 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

Publicado em
5 RESPOSTAS - 1 ÚTIL
Francois R.
Francois R.
User
Autor

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!

Ler mais
Publicado em de Francois R.
Francois R.
Francois R.
User
Autor

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!

Ler mais
Publicado em de 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=""

Ler mais
Publicado em de Der Zwoemti
Der Zwoemti
Der Zwoemti
Moderator

sorry i cant post code here...

Ler mais
Publicado em de Der Zwoemti