Back to the top of page ????

Butlerkid

Is there a way to provide the viewer with an icon to click that would take them back to the top of the page?

Or some other way to accomplish this?????

Thanks!

Butlerkid

Found answer - but don't know how to use coding! Help!
Found answer - but don't know how to use coding! Help!

This site seems to have the coding to add a "to the Top" feature. I have selected a .png file...


BUT -

1) where do I put the coding in the box....?

2) where do I put the coding in the "scrolltotop.js" link?

3) where do I put the .png and how do I link it to this coding?

4) How do I specifiy "valid doctype" referenced in the IMPORTANT NOTE?

5) what else do I need to do?

I don't know CSS or HTML....hope someone can help me!

denisegoldberg

Butlerkid wrote: »

This site seems to have the coding to add a "to the Top" feature.

That uses Javascript. The new smug does not support javascript.

--- Denise

Butlerkid

Well, today I viewed a new SM site with a cool To the Top feature. When I asked how he had done it, he gave me a link to the site I linked in #2. Could he be using HTML or CSS?

I've looked around the linked site, but didn't see anything else that address the To the Top feature.....

Ferguson

This is something of a kludge, but I think it works.

Figure out where you want this (you may want to test first on a single page). Figure out where you want the link and add an HTML box there. In that box put this:

<a href="#Top">Go To Top</a>

Change the words as you like.

This gives an invalid link to "#top" which isn't there, but the default (at least in most browsers, not sure if all) is to go back to the top when you get a bad # link.

If you want an image there you have to find an image and wrap the imge in the A code (i.e. the image tag goes inside where it says "Go To Top"), but I haven't tested that.

Butlerkid

Thanks, Denise. I want it on the right side of the footer........ Can I create HTML container that has the HTML in the footer and applies at the site level?

and I'd like to use a.png file for the icon.....

I got the .png file here - 48x48...... I'll try just the code you gave me first!!!!!

THANKS!

Butlerkid

OK - I got the words "Go to TOP to show at the bottom of each page of my website......I'll have to play around with the margins....

Haven't tried the photo yet....do I put the photo in an unlisted folder and put the URL instead of the wording?

Allen

Butlerkid wrote: »

OK - I got the words "Go to TOP to show at the bottom of each page of my website......I'll have to play around with the margins....

Haven't tried the photo yet....do I put the photo in an unlisted folder and put the URL instead of the wording?

Replace words with
<a href="#Top"><img src="image link" /></a>

Butlerkid

Hi! This is great! Both you and Denise have always been awesome help to me! Thanks, I'll give it a go!

Butlerkid

Like this:

Allen

Butlerkid wrote: »

Like this:

<img src="http://butlerkid.smugmug.com/photos/i-42qKSkB/0/Ti/i-42qKSkB-Ti.png&quot; />

I get no image, make sure external links or whatever they now call now it is on in its gallery.

If you have not unveiled check legacy site gallery external links of image.

Butlerkid

I just replace the words with the link....it works, but it is WAY to big! I used 48x48. My other choices are 32x32 and 16x16.... I've uploaded them all....SM appears to be enlarging them! !

Allen

Butlerkid wrote: »

I just replace the words with the link....it works, but it is WAY to big! I used 48x48. My other choices are 32x32 and 16x16.... I've uploaded them all....SM appears to be enlarging them! <img src="https://us.v-cdn.net/6029383/emoji/Laughing.gif&quot; border="0" alt="" >!

Put in whatever size works. See if this works.

<img src="http://butlerkid.smugmug.com/photos/i-42qKSkB/0/15x15/i-42qKSkB-15x15.png" />

Butlerkid

WooHOOO!!!!! The coding worked......and 40x40 was about right!

I haven't published it.....can you see it?

I guess a red arrow would match my site better. But at least you guys figured out how to make it work!

The site I saw with this had a two of these "<" (one on top of the other) both pointed up. Nice and simple. But I couldn't find such an icon on the net. I have found a red arrow I might be able to use.

Thank you Denise and Allen!!!!! <img src="https://us.v-cdn.net/6029383/emoji/clap.gif" border="0" alt="" >

Hikin' Mike

Butlerkid wrote: »

WooHOOO!!!!! The coding worked......and 40x40 was about right!

I haven't published it.....can you see it?

I guess a red arrow would match my site better. But at least you guys figured out how to make it work!

The site I saw with this had a two of these "<" (one on top of the other) both pointed up. Nice and simple. But I couldn't find such an icon on the net. I have found a red arrow I might be able to use.

Thank you Denise and Allen!!!!! <img src="https://us.v-cdn.net/6029383/emoji/clap.gif&quot; border="0" alt="" > <img src="https://us.v-cdn.net/6029383/emoji/iloveyou.gif&quot; border="0" alt="" > <img src="https://us.v-cdn.net/6029383/emoji/clap.gif&quot; border="0" alt="" > <img src="https://us.v-cdn.net/6029383/emoji/wings.gif&quot; border="0" alt="" > <img src="https://us.v-cdn.net/6029383/emoji/wings.gif&quot; border="0" alt="" >

Why not create one using Photoshop (or similar program)?

Butlerkid

Now I'm getting a "Page not found" message. I must have messed up the coding. Spot the error?

theresav

<a href="top">

You left the # out in front of the word top. Actually, you don't need the "top" at all, you can just have the a href=# and it will work.


I believe if you want to right align the image on the page, you can just wrap your code in

<div align="right">your code</div>

Butlerkid

Well....I'm back in business!

This works....




It's almost midnight....so glad I can now go to bed! !

Just wish it didn't showup when going from one page to another.......it briefly flashes on the page, then disappears.

Let me know what you think!

Thanks everyone!

theresav

I'm not seeing the icon, Butlerkid. Just a broken link placeholder.

Butlerkid

What browser are you using?

I'm using FF and it is working great!

In IE, a rectangle appears with an "x" and the word image in red.....but it does still take you to the top of the page.

Perhaps someone could let me know about other browsers?

Any ideas on changing the code to work with most browsers.......?

theresav

Is your image in a publicly accessible site? I was using Chrome (latest version) at home. I'm at work now, and just tried Chrome, IE8 (work....they can't seem to keep us with the latest version of that one), and Firefox (latest version) and I can't see the image in any of them.

I even tried pasting the url just for your picture and pasting that into my browser and just get a broken link or 404 error...no picture.

It might be that you're seeing the picture because it is either cached in your computer, or because you're logged into your image host site?

Butlerkid

The image is showing up using FF when I am not logged in to SM. The image is in an unlisted gallery.

Allen

Butlerkid wrote: »

The image is showing up using FF when I am not logged in to SM. The image is in an unlisted gallery.

But no body else sees it.

Make sure that the image that the gallery is in has "External Embedding" on.
Gallery Settings > Security & Privacy

Butlerkid

Security / privacy is unlisted.

Sharing is On. External embedding is on.

Strange that I can see the image when not logged in to SM, and it works, in FF. Can anyone else verify that it shows up and works properly in FF for them?

Allen

I see the red word "image" in Firefox22.
IE10 broken link with red "image"

Butlerkid

I am using FF 22.0 also..... why would I see it in FF when logged out of SM and you don't see it in FF? Does it work for you?

Using IE, I see the same broken link with red "image"..... but it does work, even though the image is not showing up. Does it work for you?

Thoughts on how to fix it? Current coding is in post #18........

PhotoDavid78

Thanks for this. I used it as a text link at the bottom of each photo scroll window

An example of it is here:
http://www.davidweissphotos.com/Browse/TownCountry/China/Zhouzhuang

Butlerkid

David,

That looks really nice and clean! I may have to do that also if we can't figure this out!

PhotoDavid78

Butlerkid wrote: »

David,

That looks really nice and clean! I may have to do that also if we can't figure this out!

thank you

Butlerkid

Here is the current coding. Does it need the " alt-image" part.....I've deleted it twice and SM puts it back in!!!!!


<a href="#top"><img src="http://www.pleasanttravelsphotography.com/photos/i-TQdn2FC/0/30x30/i-TQdn2FC-30x30.png&quot; alt="image" /></a>


And here is the link for the image:

http://butlerkid.smugmug.com/photos/i-TQdn2FC/0/Ti/i-TQdn2FC-Ti.png

Butlerkid

anyone?????