Welcome to WebmasterWorld Guest from 54.159.165.175

Forum Moderators: open

Top button does not work

   
11:56 am on Jun 22, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



I have tested top button but do not know why it does not work.
Is there issue with code?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript" src="javascript/motools.js"></script>
<style type="text/css">
.preload {display:none;}
#gototop{
width: 95px;
height: 30px;
position: fixed;
right: 3px;
bottom:3px;
z-index:1000000;
}
#top {
position:absolute;
top:0;
left:0;
}
#gototoplink {
text-decoration:none;
border: 0 none;
outline-width:0;
}
#gototopbutton{
cursor: pointer;
background: url(images/arrow.gif) no-repeat scroll 0px 0px;
background-color: transparent;
color: #000000;
font-size: 14px;
height: 30px;
padding-top: 7px;
padding-right: 0px;
padding-bottom:0px;
padding-left: 7px;
text-align: center;
width: 95px;
display: block;
}
#gototopbutton:hover,#gototopbutton:focus,#gototopbutton:active, a:hover #gototopbutton{
color: #4D87C7;
background: url(images/arrow_active.gif) no-repeat scroll 0px 0px;
background-color: transparent;
}
</style>

<script type="text/javascript">if( MooTools.version >= '1.2' ) {
window.addEvent('domready',function() {
new SmoothScroll({ duration: 250 }, window);
var gototop = $('gototop');
gototop.setStyle('opacity','0').setStyle('display','block');
});
window.addEvent('scroll',function(e) {
var gototop = $('gototop');
if(Browser.Engine.trident4) {
gototop.setStyles({
'position': 'absolute',
'bottom': window.getPosition().y + 10,
'width': 100
});
}
gototop.fade((window.getScroll().y > 200) ? 'in' : 'out')
});
} else {
window.addEvent('domready',function() {
$('gototop').setStyle('opacity','0');
new SmoothScroll();
var Change = new Fx.Style('gototop', 'opacity', {duration:250});
var scroll = window.getScrollTop();
if (scroll > 200){
if ($('gototop').getStyle('opacity','0') == 0){Change.start(1);$('gototop').setStyle('display','');}
}
});
window.addEvent('scroll',function(e) {
var scroll = window.getScrollTop();
var Change = new Fx.Style('gototop', 'opacity', {duration:250});
function Show(){ $('gototop').setStyle('display','');}
function Hide(){ setTimeout("$('gototop').setStyle('display','none')",250);}
if (scroll > 200){
if ($('gototop').getStyle('opacity','0') == 0){Show();Change.start(1);}
} else {
if ($('gototop').getStyle('opacity','1') == 1){Change.start(0);Hide();}
}
});
}
</script>
</head>

<body><a id="top"></a>
<br /><br /><br /><br /><br /><br /><br /><br />
<div id="gototop" style="visibility: visible; opacity: 1;">
<a id="gototoplink" title="Top" href="">
<span id="gototopbutton">Top of page</span>
</a>
</div>
</body>

</html>
12:26 pm on Jun 22, 2011 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



<a id="gototoplink" title="Top" href="">  
<span id="gototopbutton">Top of page</span>
</a>


Is this your 'top button'? You have nothing in your HREF attribute?! You need to set this to
HREF="#top"
.
5:44 pm on Jun 22, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Also set display block on your a . . . or put a border on it to see if it's rendering as anything other than a thin line.

#gototoplink {
display:block;
border: 1px solid #000; /* temporary */
text-decoration:none;
border: 0 none;
outline-width:0;
}

You also don't need a span inside the div to get a button. Put the BG on the anchor, skip the span, it's the display:block you were missing in sorting that out.

<a id="gototoplink" title="Top" href="#top">Top of page</a>

#gototoplink {
display:block;
height: 30px;
width: 95px;
text-decoration:none;
border:none;
outline:none;
background: transparent url(images/arrow.gif) top left no-repeat;
color: #000000;
font-size: 14px;
padding: 7px 0 0 7px;
text-align: center;
}

Then you can double the height of the actual arrow.gif and create a mouseover state like

mousout image
------------
mouseover image

and add

#gototoplink:hover { background-position: bottom left; color: #ff0000; }
9:05 am on Jun 24, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



It works as posted rockbil.

1. Which setting is actually smooth scroll?
We have:
new SmoothScroll({ duration: 250 }, window);
if (scroll > 200){
if (scroll > 200)
{ var Change = new Fx.Style('gototop', 'opacity', {duration:250});

What are these settings?

2. I like to upgrade to updated version:
<script type="text/javascript" src="javascript/mootools-1.2.5-core-yc.js"></script>
<link rel="stylesheet" href="css/stylesheet1.css" type="text/css" />

Is this correct like:
<script type="text/javascript">if( MooTools.version >= '1.2.5' ) {

and how to move to separate file all after <script type="text/javascript">if( MooTools.version >= '1.2.5' ) {

3. How to show all the time Top button at the bottom locatio as I have to scroll to see Top button. It needs to be all the time seen on the bottom hand side.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month