Back to Top Arrow... - Post ID 280918

User 2889891 Photo


Registered User
18 posts

Good Evening,
I am using this script:

<style>
a.back-to-top {
outline: 0;
display: none;
width: 60px;
height: 60px;
text-indent: -9999px;
position: fixed;
z-index: 999;
right: 20px;
bottom: 20px;
background: #000000 url("up-arrow.png") no-repeat center 43%;
opacity: 1.0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
</style>
<script type="text/javascript">
$('body').prepend('<a href='./index-arrow/up-arrow.png' class="back-to-top">Back to Top</a>');
</script>
<a href='./index-arrow/up-arrow.png' class="back-to-top">Back to Top</a>



However,
When I use this <a href> './index-arrow/up-arrow.png' it doesn't work, I just get a black box, nothing else. Any suggestions?

The website URL is www.xtremepaintball.com.au

Thank you, All
Benjamin
User 122279 Photo


Senior Advisor
11,597 posts
Online Now

Does it become visible if you change the 'display: none;' to something else?
Or if you create a folder 'img' and pop it in there? (shouldn't make any difference, but you never know... I tried it, and it worked here.)
If you can't make it work, try adding a font-icon instead. Search for 'arrow-up'. You can change the colour of it to anything you like.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RFF, RBB, RSD and SD: http://www.horgenhonning.net/sharing/


User 244626 Photo


Registered User
659 posts

I do not even see a folder in your structure named index-arrow for the up-arrow.png to be in ? FTP error ?
User 283347 Photo


Registered User
256 posts

hhmmmm...try this.... where you have...
background: #000000 url("up-arrow.png") no-repeat center 43%; ....change it to #000000FF

or you could try to change:
opacity: 1.0;...to 0.0;

Try one, if it doesnt work, try the other...then both if needed. Just a thought.

MJ
User 122279 Photo


Senior Advisor
11,597 posts
Online Now

I overlooked this earlier, but this line:
background: #000000 url("up-arrow.png") no-repeat center 43%;

is telling the browsers that the up-arrow image is in the same folder as the page it is going to be displayed on. You need to be consistent in the path to the image. Find out where it is located, and make the path accordingly.

As you see, we are just making half-qualified guesses here. It would have been much better if you had posted your project file, then we would have found the error within no-time (nearly ;) )
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RFF, RBB, RSD and SD: http://www.horgenhonning.net/sharing/


User 187934 Photo


Senior Advisor
18,132 posts
Online Now

Try this
$('body').prepend('<a href="./index-arrow/up-arrow.png" class="back-to-top">Back to Top</a>');
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.