Printable View
Hey there,
is it possible to implement something like this: http://webdesignerwall.com/tutorials...-scroll-to-top using Web Designer 6?
I must thank everyone for helping my out on my previous threads - its truly amazing, so appreciated. Thank you so much.
Check this out - just put it in a placeholder
http://www.scrolltotop.com/
Hey there Big Frank,Quote:
Originally Posted by Big Frank
thanks for your reply. I must admit that I'd like the 'Scroll to top' to become visible once you are somewhat down the page - besides, I do like the design of the one I linked to in my first post. Do you know if its possible to implement that?
Yes, it's fairly simple css and javascript that you can simply copy and paste into the appropriate placeholders.
Download and unzip the zip folder in your link.
For WD6 place this code into a placeholder and then give it the name <head> using the name tagAttachment 92217
Then create a second placeholder (html body) and place the button code. This placeholder needs to be placed within your page.Code:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
<style>
/*
Back to top button
*/
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(index_htm_files/up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}
</style>
You will need to upload the up-arrow.png (found in the downloaded zip folder) into your index_htm_files folder.Code:<p id="back-top">
<a href="#top"><span></span>Back to Top</a>
</p>
Here's a simpler alternative. Put following code to the page head code section:
Then add following link to the button to start scrolling:Code:<script type="text/javascript">
function my_scr2top()
{
var x=window.pageXOffset;
var y=window.pageYOffset;
if(xr_ie)
{
x=document.documentElement.scrollLeft;
y=document.documentElement.scrollTop;
};
window.scrollTo(x/2,y/2);
if(x+y>4) setTimeout("my_scr2top()",50);
};
</script>
Code:javascript:my_scr2top()
What annoys me in such situations is a "Back to Top" button on a page that is short and doesn't need one. Sometimes I add a script that measures the length of the page and after a certain length or a certain amount of content, adds the button. It all depends if the site is db driven or is a static site, but in any event, there's no button on short pages which is nice.
And that is exactly the special thing with the one I linked - because I completely agree; I do not want the 'to top' to show up until the page reached a certain length.Quote:
Originally Posted by Big Frank
To the posts above, thank you very much. I think I got an idea, I will test it in a few hours. Thanks again!