Need HTML? Want to use CSS (cascading style sheets)? Need a touch of help with Javascript, Java, or other coding language? Whether through SBI!'s BlockBuilder 2 or your own HTML Editor, post here. Push the envelope. Learn basics (ex., how to format your text, add tables) or go as "out there" as you like. Problems? Questions? Help and be helped.

Moderators: Laura from Chautauqua, Will from Los Ojos

Solo Build It! Holiday Special - Save 33%
#1385018 by Debs from SiteSell
Fri Oct 27, 2017 1:52 pm

This is AJ's code from the first post:

Code: Select all<button onclick="topFunction()" id="btnTop" title="Go to top">Top</button>
<style>
#btnTop{
display:none;
position:fixed;
bottom:50px;
right:5px;
z-index:99999;
border:none;
outline:none;
background-color:#f00;
opacity:.6;
color:#fff;
cursor:pointer;
padding:10px;
border-radius:6px;
}
#btnTop:hover{
background-color:#900;
}
</style>

<script type="text/javascript">window.onscroll=function(){scrollFunction()};function scrollFunction(){if(document.body.scrollTop>20||document.documentElement.scrollTop>20){document.getElementById("btnTop").style.display="block";}else{document.getElementById("btnTop").style.display="none";}}function topFunction(){document.body.scrollTop=0;document.documentElement.scrollTop=0;}</script>



See the items with the word "color" in the row, those are the items where you can change to the colors you want.

Here is a good chart you can use to find colors:

https://www.w3schools.com/colors/colors_picker.asp

You replace the colors there now with the ones you want. Here are the 3 items about the colors:

background-color:#f00;
color:#fff;

#btnTop:hover{background-color:#900;
}

color:# ; is for text; any other color is always defined by what it's for; the last item above is the background color for the button top on hover for instance

You can also use 6 digit hex codes, for instance:

background-color:#ffe6e6;
color:#003cb3;

You can change the border/outline:

border:none;
outline:none;

And you can change the opacity (transparency):

opacity:.6;

Radius of the corners:

border-radius:6px;

And padding:

padding:10px;

And where it is positioned:

position:fixed;
bottom:50px;
right:5px;

Hope this helps.

Debs
#1385306 by A J from Somewhere Hot
Tue Oct 31, 2017 9:22 pm

Just a quick addition to this.
If you would rather that the button was a circle instead of square then look for this line in the css...

Code: Select allborder-radius:6px;


Then change that to...
Code: Select allborder-radius:50%;


And that's all you need to do to get a circular button. :D

Cheers, AJ
#1387999 by Susan from Burgess
Fri Dec 08, 2017 11:14 pm
I upload my own pages. Does anyone know how to use this or have a similar code that would work for me. I've been searching online and found some code but doesn't work well. Thanks so much.
Similar Topics Statistics Last post
StumbleUpon and Yummly Buttons don't show up
by Saima from Queenstown Tue Nov 07, 2017 3:55 am
3 Replies
155 Views
by Saima from Queenstown
Tue Nov 07, 2017 4:49 pm
Google adsense searchbox wrongly positioned when using mobile
1, 2 by Smart Kid from Mýkonos Sun Nov 12, 2017 9:36 pm
23 Replies
791 Views
by Smart Kid from Mýkonos
Thu Dec 14, 2017 8:30 pm
Need easy htlm code for top of page button
by Theona from Maple Shade Sun Dec 25, 2016 11:12 pm
4 Replies
907 Views
by Kim from New Farm
Wed Dec 28, 2016 3:11 am
Help making page hearder, footer, etc., disappear at print time using this code
by Luke from Meansville Mon Jan 23, 2017 6:58 pm
3 Replies
1073 Views
by Luke from Meansville
Wed Jan 25, 2017 10:58 pm
Sticky Back to top button
by Kim from New Farm Sat Sep 30, 2017 1:07 am
5 Replies
320 Views
by Kim from New Farm
Sun Oct 01, 2017 1:05 am

Users browsing this forum: No registered users and 2 guests