Using back to top scroll button and jQuery
Autore: Francois R.
Visite 3993,
Followers 3,
Condiviso 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
It would be good to have tutorials like this to better understand Website X5.
Thanks,
François
Postato il
Autore
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!
http://unofficialwsx5.de/index.php/Thread/2472-Scroll-to-Top-Zum-Seitenanfang-scrollen/
Autore
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!
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=""
sorry i cant post code here...