last day (14 days later) » 

1:47 AM
0
A: Delay the opacity of button on viewport position

mbnycFor my own website, I needed to do something similar to your request for the "Back to Top" button that appears fixed at the bottom right corner of the page. This button only appears when somebody scrolls down the page past a certain point. They can then click on the button to automatically scrol...

 
That's actually exactly what I am using it for. I have the <head> script to link it to the top already. I am using Wordpress, can I put that jQuery in my functions.php?
 
I've never used Wordpress. Sorry.
It's a small bit of jQuery code. You can try inserting it to your php file and see if it works.
 
if not can I insert it into my <head> with simple <script> tags
 
Yes, you can put your script in the <head> or <body> sections. My script for this function is right next to the related HTML on the page. Just make sure your code is enclosed withing <script> & </script> tags, and don't put any scripts after the closing </body> tag. If you want to learn more about script placement best practices, see stackoverflow.com/questions/436411/…
And (if not already there) make sure to add a link to the jQuery library in the <head> section of the page. See this: developers.google.com/speed/libraries
 
I have linked in jQuery through google ajax. and put it in script tags but still having problems
 
1:47 AM
what's the problem?
 
it's small it stays visible to long trying to make it only 'appear' right near the bottom, trying the values i put in
 
did you have a chance to view the demo i prepared? does that work for you?
 
the way it works is great, fades in nice
but I have to put an exact value for var offset = ... for it to work similar
that would be fine if that value was distance from the bottom, but I figure it was distance from the top
 
is your page online somewhere where i can see it?
 
unfortunately not, its on local host
like I said, everything works/animates perfect except that the value for var offset, I was wondering if there was a way that value could be 'distance from bottom' rather than from the top
distance from the top changes based on screen size so a specific value is hard to use
the distance from the bottom wouldn't change
 
1:56 AM
I wrestled with the question as well when developing my back-to-top button. Where exactly do you want your users to be when the button appears?
 
very bottom of the page
the button is the last thing on the page
and I find when it's overtop of other elements the button screws up
 
And you're saying that this button is for the back-to-top as well?
 
ya
<script> function scrolltop(){ $("html, body").animate({scrollTop:0}, '500'); } </script>
is what i put in the header for it to anchor to
 
I just checked the jQuery documentation. Offset supports only top and left, not bottom.
 
oh ok,
using it as it, it shows up over text and images, etc. since it shows up a certain distance from the top. but when its over text the 'hit area' of the button doesn't work. Only when its not overtop of anything does it seem to work properly
 
2:03 AM
However, you may want to consider this problem form a usability perspective. The purpose of the back-to-top button is to provide a convenience to your page visitors who are scrolling down on the page and may want to go back up. If you don't give them that opportunity until they're already at the bottom of the page, much of the benefit is wasted. What about all the people who may have want to go up when they're only half-way down the page, or three-quarters?
I had edited my code because I didn't know what your use-case was. But now that i know it's the same, I'll show you the entire thing as-is.
 
It's not to long of a page, its more for aesthetics. It is the best solution so far, however like I mentioned when its overtop other elements the mouse over area reduces (sometimes only a 5px top right area is clickable) even with z-index raised
 
If you can't provide an white-space in the left and right margins of your viewport (which would make you button stand out nicely, then try to design a button that contrasts over the colors of your page.
Are you interested in the full code for this solution. Will take me a few minutes to pull together. If you're just, just let me know and I'll save the time.
horrible english.. typing to fast.. sorry
too!!!
 
no problem. It's ok about the code. It links properly and everything, it just shows up to soon for what I am looking for. And I have issues since when it shows up early (and thus overtop of elements) its hit area is affected by whats underneath it. Only until it hits the very bottom (where there is room for it and nothing around/underneath) then it works perfectly
thanks for all the help. I have a good starting point to see if there are other options to look into
 
In my code, the button appears when the user scrolls down a bit. Then as the user keeps scrolling down, the button fades to a lighter shade to make it less obtrusive. Also, elements underneath the button don't interfere. Again, I have no problem sharing it with you if you think it will help. But if you don't need it, that's okay too.
 
well sure I'll take a look it would be great to have it on file
 
2:15 AM
ok. will put it together.. will take about five minutes..
 
thanks
I have just received a code that works closer to what I want, however it doesn't 'fade out' after it shows up
 
2:40 AM
Understood. Hope it works for you.

Here's the code anyway. Let me know what you think.
http://jsfiddle.net/zmz6g8kh/2/
 
that is really neat, I like the three stages of how it works. I can't tell if it gets interfered with overtop of text or not.
My site isn't that large, very minimal links. But the nag doesn't stay at top when you scroll so i put it at the bottom if you want to go back to the nav. There are links throughout that take you to the places, but if they can't figure that out than it acts as a last resort
 
this flys over many sections of my website... always works.. no interference from below... if you have any trouble, try applying a high z-index value to the button, which will keep atop in the stack...
flies
did you say you'
did you say you've added your nav bar to the bottom of the page?
 
no, just a nag bar at the top of the screen, but scrolls up with the content
*nav
 
okay, got it.. so i hope this or another of the answers to your post solves your problem
 
thanks again, it's always nice to converse with a helpful person.
 
2:49 AM
happy to help (i love this stuff :-) ... and if you think my answer was on target, i hope you'll consider selecting it as your answer, an upvote, or both.. good luck!
 

last day (14 days later) »