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

  • 2
  • Question
  • Updated 9 years ago
  • Answered
How can i add a [Back To Top] button to my webpage. I want it so that it doesn't use a hyperlink, as that means the page has to re-load. Is there a way to get the [Back To Top] button to work without re-loading the page? Thanks.
Photo of Seaview Flowers

Seaview Flowers

  • 99 Posts
  • 3 Reply Likes

Posted 9 years ago

  • 2
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Hi,

Yep there sure is! It's called anchors. Here's how:
<!--
Add this to any heading you have at the top of your page. It's a normal link with the name attribute added.

<a name="top">YourHeadingHere</a>

Then add this to the bottom of your page:

<a href="#top">Back To Top</a>

-->
Connor
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Connor! :)
Photo of Fin

Fin

  • 1 Post
  • 0 Reply Likes
awesome! thank you
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
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.
Photo of Seaview Flowers

Seaview Flowers

  • 99 Posts
  • 3 Reply Likes
Is there a way to right justify the "Back To Top" text..?
Photo of Rob.B

Rob.B

  • 281 Posts
  • 4 Reply Likes
Have a look at this link,

http://www.computerhope.com/issues/ch...

Then replace the href with #top to get it to work as Connor suggested.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
There's actually an easier way. I use anchors... but not for Back to the top links or buttons. All you have to do is insert a link to the same page... for example...
<!--
<a href="http://youcanneverbetoosmart.com/anth... to the Top</A>
-->

that's how I do it.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
And it will look like....

Back to the Top

And clicking it will take you to the top.
Photo of Seaview Flowers

Seaview Flowers

  • 99 Posts
  • 3 Reply Likes
But is there not a way that the "Back to Top" button will follow you down the page until you want to click it.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
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.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Seaview Flowers

Can you please let me know what didn't work? If you'd like, you can leave your site URL and I can take a closer look at what's going on.
Photo of Seaview Flowers

Seaview Flowers

  • 99 Posts
  • 3 Reply Likes
I done all the steps you stated but it didn't seem to of worked.. URL = www.seaviewflowers.co.uk
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
I'm able to use the Back to Top links on this page: http://seaviewflowers.co.uk/products.php - it does direct me to the top of the page. Does it not work for you? If not, could you let us know what browser you are using?
Photo of Seaview Flowers

Seaview Flowers

  • 99 Posts
  • 3 Reply Likes
Yes that works fine, but i wanted to have the "Back To Top" aligned to the right of the page..?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Seaview Flowers

Yes.. you can right-align the "Back To Top". If you have added your code to your text widget using the HTML button on the text tool bar, then you can simply highlight the "Back to Top" link and then select the right alignment.

Otherwise, you can also tweak it by manually adding in the code which would look like this:

<div style="text-align: right"><a href="#Top">Jump to Top</a></div>

I hope that is the information you were after. Please let me know if you have any trouble with this.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
not sure exactly what Sanja said above, I didn't feel like reading it cause it's too long... but there are ways a back to top button can follow down the page... it's usually done simply by inserting some type of code so it moves with the page. But a tip.... I get headaches when things move with the page, your viewers may also. Remember that convenience isn't always better, especially if you're causing a lot of headaches.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Donald - the code I provided above is what can be used so that the back to top button can follow you down the page.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
ok... I still don't like that Idea. It makes it "more convenient" because the button is always in sight... but when I scroll on a page and something scrolls with it, it makes me nautious
Photo of Seaview Flowers

Seaview Flowers

  • 99 Posts
  • 3 Reply Likes
Yes Donald i am the same as you. I thought there might of been a feature that would allow the "Back to Top" button to follow you down the page.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
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.
Photo of papa

papa

  • 327 Posts
  • 20 Reply Likes
Hi all

Here's one that maybe will work.

http://www.dynamicdrive.com/dynamicin...

You'll need to use Javascript and pro yola but there is a arrow up (return to top){on the right hand lower corner} that follows you while going down the page being viewed. When you click on the arrow the page scroll to top of page without reloading.

If this don't work there are great ideas above that work well.

papa
Photo of papa

papa

  • 327 Posts
  • 20 Reply Likes
see it work at http://www.shoppealots.com

papa
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Is there a way to do an anchor tag using an image like a button instead of text? That is a button on the top that would point to text on the page below? I know you can reverse the order of the anchor code to go from top to bottom but I couldn't get it to work with a button image.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
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.
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Ahhh, thank you. Must have been another 2:00 session LOL I'm out of here early tonight.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
You're welcome! :)