Up and down button need help.

**JRR** · 02-03-2014, 07:28 PM

I've got two great codes I use on my forum for a simple to top and to bottom of the page scrollers when they are clicked one goes in the header the other in the footer:

Code:

<div style="text-align: right;position:relative;z-index:100; margin-bottom:-40px;">
<ul class="controls">
<a class="adjusttobottom" onclick ="scroll(0,document.body.scrollHeight);"><img src="http://www.jr-richscooterdoc.com/Vbanlogo/DownPRO2.png" border="0" alt=" photo tobottom.png"/></a>
</ul>
</div>

Code:

<div style="text-align: right;">
<ul class="controls">
<a class="adjustBackToTop" onclick="scroll(0,0);"><img src="http://www.jr-richscooterdoc.com/Vbanlogo/UPpro3.png" border="0" alt=" photo UPpro3.png "/></a></li>
</ul>
</div>

I use a image for the button and they can be seen here:

http://www.thescooterprofessor.proboards.com/

I've been asked by several members if the buttons can be made to scroll with the page when you are using the normal scroll bar on your browser where you could click on them at any point? Of course I'm sure I would have to move then to the right farther but that's not problem with relative alignment.

Thanks

**molendijk** · 02-03-2014, 11:10 PM

Use position: fixed instead of position: relative. Of course, you will have to use certain values for top and / or right too.

**JRR** · 02-04-2014, 11:20 AM

Can you explain this? I put in fixed as you said and it does do what I want but when I used fixed instead of relative the button now goes all the way to the left of the page? It's like the alignment of right is totally gone.

I do fine tune the top and can tweak the right too in my style sheet but no mater how I change the pixels of "right" it has no effect?

**molendijk** · 02-04-2014, 12:32 PM

For instance:

position: fixed; right: 10px; top: 10px

for the top button. Just a wild guess. What does that do on your page?

**JRR** · 02-07-2014, 09:33 PM

Sorry for my late reply been sick with the bug but you guessed right and instead of putting that directly into the header and footer code I just added it to the style sheet area like this:

Code:

.adjusttobottom {
position: fixed;
top: 400px;
left: 8px;
}

Did a similar one for the Back to top button, results here and you can see each button scroll with the page but when clicked on they go where they need to.

http://itistheride.boards.net/

Now I've got a question? Want to know if this kind of button can be done with a html template code? Or even a javascript code?

http://scooterrebels.proboards.com/

See the single button? When you scroll about middle ways down the page the arrow will change direction to "Up" and when clicked will go back to the top. Same if you are scrolling down, the arrow stays "down" so far down the page and when clicked will go to the bottom of the page. Neat!

**JRR** · 02-07-2014, 11:20 PM

I think I just found a code that does this but not exactly sure how to put it all together?

http://stackoverflow.com/questions/1...tates-from-png

**molendijk** · 02-08-2014, 09:14 PM

Try to experiment with the following script and adapt it to your page:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Scroll Check</title>

<script>
function getDocHeight() {
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
}

window.onscroll = function()
{
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
if(scrollTop >= getDocHeight()/2)
{document.getElementById('scrollerbutton').src="http://www.itistheride.com/Rbanlogo/up1.png"}
else
{document.getElementById('scrollerbutton').src="http://www.itistheride.com/Rbanlogo/down1.png"}
}

</script>

</head>

<body>
<div style="position: absolute; height: 320%; background: red; "> </div>
<img id="scrollerbutton" alt="" src="http://www.itistheride.com/Rbanlogo/down1.png" style="position: fixed; right: 1px; top: 50%">
</body>
</html>

**JRR** · 02-09-2014, 01:38 PM

OK we are getting there and the arrow changes direction and such but will not go up or down? In other words it won't "click" to change direction? Also I double checked this but it's causing the red vertical line on the left?

Tried it on my test forum:

http://scootproftest.freeforums.net/

Ok I got rid of the red line in fact didn't need the part of the code of the background, my forum background is controlled by the theme manager so I removed it:

Code:

background: red;

OK just like you said I'm playing with it and I have to remove the HTML and BODY tags because they are in my forum script by default so adding them stopped the vendor ad they have on the forum to stop, again look at the test forum. This is what I have in the header right now and if I can get it to click up and down I'll have it, except may need to adjust it in or out on the side?

Code:

<script>
 function getDocHeight() {
 var D = document;
 return Math.max(
 D.body.scrollHeight, D.documentElement.scrollHeight,
 D.body.offsetHeight, D.documentElement.offsetHeight,
 D.body.clientHeight, D.documentElement.clientHeight
 );
 }

 window.onscroll = function()
 {
 var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
 if(scrollTop >= getDocHeight()/2)
 {document.getElementById('scrollerbutton').src="http://www.itistheride.com/Rbanlogo/up1.png"}
 else
 {document.getElementById('scrollerbutton').src="http://www.itistheride.com/Rbanlogo/down1.png"}
 }

 </script>

 

 
 <div style="position: absolute; height: 320%; ">&nbsp;</div>
 <img id="scrollerbutton" alt="" src="http://www.itistheride.com/Rbanlogo/down1.png" style="position: fixed; right: 1px; top: 50%">

Shouldn't there be a "on click" part in the code?

**molendijk** · 02-09-2014, 03:46 PM

The very long red vertical line was only there to force a vertical scrollbar. Of course you don't need that line.
And of course you need a click event. Just do what you did before. It means that you need this: