Assessing the screen position of an anchor?

Question

Sorry, I'm new to javascript, and I'm stumped with this problem.

I have a div in fixed position at the top of my page.

In it are links that when you click, the page scrolls to an anchor. (I used jquery for this.)

I also used javascript to make the "back to top" button appear whenever someone click any of these links, and disappear when they click the "back to top" button itself.

...But it occurs to me that sometimes people will just use the scroll bar instead of the buttons.

Is there a way to make the "back to top" button appear when users scroll down using the scroll bar, and disappear when they scroll back to the top?

In other words, is there an attribute that I can use to assess what anchor is currently at the top of the page? (If so, I can probably figure out the solution from there...)

...Or maybe there is some way to know when users have scrolled back to the top so I can use javascript to get rid of the "back to top" button?

Any help appreciated! Thanks!!

David Hellsing · Answer 1 · 2012-10-01T19:55:20.147

0

You can use the scrollTop() function in jQuery to determine scrolling distance.

F.ex:

$(window).scroll(function() {
    $('#backtotop').toggle( $(this).scrollTop() );
});

This will hide the element with backtotop as ID when the scrolled distance is 0.

If you like a non-jQuery solution, I’m pretty sure you can use the window.scrollY property:

window.onscroll = function() {
    if (!window.scrollY) {
        // hide it
    } else {
        // show it
    }
};

edited Oct 01 '12 at 19:55

answered Oct 01 '12 at 19:50

David Hellsing

106,495
44
176
212

Thanks for the answer, but I'm so new that I don't know much at all about jquery. I'm teaching myself javascript, and of course, next on my list is jquery. (btw, sorry for the rude screen name, I'm new to stackoverflow as well, so I used a "junk" email account." – user1712685 Oct 01 '12 at 19:51
var topBtn = document.getElementById("top_btn"); window.onscroll = function() { if (!window.scrollY) {topBtn.style.visibility="hidden"; } else {topBtn.style.visibility="visible"; } }; //doesn't seem to work :^( – user1712685 Oct 01 '12 at 20:45
david, the scrollY property doesn't work with Internet Explorer browsers older than IE9. :^( Leaves out too many browsers... – user1712685 Oct 01 '12 at 21:29
@WhackingOff If you are looking for cross-browser compat, use jQuery. If not, you will spend 90% of your educational time doing polyfills and developing your own "library" with normalization methods that jQuery already has included in their swarm of tests. – David Hellsing Oct 01 '12 at 21:32
Thanks david. Looks like I'm gonna have to dive into jquery quicker than I thought I'd need to. Thanks for your help & insights. – user1712685 Oct 01 '12 at 21:35
NP. Tip: you can change you screen name in the account settings. – David Hellsing Oct 01 '12 at 21:40

score 0 · Answer 2 · edited May 23 '17 at 12:12

0

You can get the scroll position with

var scrollTop = $(window).scrollTop();

http://docs.jquery.com/CSS/scrollTop

There are some more hints here: How do I determine height and scrolling position of window in jQuery?

edited May 23 '17 at 12:12

Community

1
1

answered Oct 01 '12 at 19:50

Stefan Neubert

1,053
8
22

Okay thanks David. I'm playing with it now. Not much luck so far but I think I'm on the right track with the javascript code you posted. Thank you too Stefan. – user1712685 Oct 01 '12 at 20:12
unfortunately the scrollY property doesn't seem to work. Here's the code: var topBtn = document.getElementById("top_btn"); window.onscroll = function() { if (!window.scrollY) {topBtn.style.visibility="hidden"; } else {topBtn.style.visibility="visible"; } }; – user1712685 Oct 01 '12 at 20:43

Assessing the screen position of an anchor?

2 Answers2