[Back To Top] Button On Webpage....

Hi Seaview Flowers

Just to add a bit more detail to Connor's suggestion, here are the steps in case you were not able to figure out how to do this:

Step 1: Creating the link

1.Drag and drop and HTML widget onto your page where you would like the text to appear for your visitor to click on, for this example it will be the bottom of the page.

2.Enter this code in the HTML widget: <a href="#Top">Jump to Top</a>

What this bit of code is saying is: Top is the specific place on the page I want to jump, and Jump to Top is the text I want the link to display.

Step 2: Marking the Spot

1.Drag and drop and HTML widget onto your page where you would like the link created in Step 1 to take the clicker, for this example it would be the top of the page.

2. Enter this code in the HTML widget: <a name="Top"></a>

What this bit of code is saying is: Here is the place named Top, and a link with this place specified needs to go here.

Keep in mind that Top and Jump to Top are arbitrary. You could create a link that would go to Center or to a specific topic on a page called News.

Hopefully that helps as well. Please let us know if you have any trouble with this.

Hello Seaview.. no you cannot have a "back to top" button that follows you down the page using just this code given above. However, what you can is use the Floating Top Bar: http://www.dynamicdrive.com/dynamicin... and incorporate your "back to top" on that menu.

Here are the steps to do this:

1. Download the following image and upload to your file manager:


2. Enter this code in the HTML widget: <a href="#Top">Jump to Top</a> (where you want to page to jump back up to)

3. Copy and paste this code into another HTML widget:
<style type="text/css">

#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 620px;
visibility: hidden;
z-index: 100;
}

</style>

<script type="text/javascript">

/***********************************************
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>

4. Copy and paste this into another HTML widget:
<div id="topbar"> <a href="" onClick="closebar(); return false"><img src="resources/close.gif" border="0" /></a> <a href="#Top">Back to Top</a> </div>

I hope that helps! Please let me know if you get stuck along the way.

Hello Seaview Flowers

Unfortunately, we do not have a feature within Yola's site builder to allow the "Back to Top" button to follow you down the page. The best alternative is to use the code I provided above to achieve this.

I'm sorry that I couldn't be of more help in this regard. If you should want to implement the code, please let me know if you need help with it along the way. I'd be happy to do so.

Hi Diane

Yep.. you can definitely use an image if you'd like. This is what the code would look like for the link you would click on to make it jump:

<a href="#Top"><img src="resources/yourimagefile.jpg"></a>

Please let me know if I need to clarify things.