Scroll down hint at bottom of browser window [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 8 years ago.

Improve this question

I'm working on a huge single page website and would like to show an scroll down hint (icon or something like that) at the bottom of the window when the user visits the website.

The hint should vanish when the visitor either scrolls down or clicks on the icon. I've seen this on several websites which I can't remember now unfortunately. Already been searching on but with no results as I'm probably searching with the wrong keywords...

Anyone has any directions on where to start to achieve this?

Answer 1

Here is a start to get the scroll hint working. Now on styling, that's up to you but I would personally do something like position: absolute and then work from there and give it a zIndex about everything on the page.

$(window).scroll( function() {
    if($(document).scrollTop() == 0 ) {
        // SHOW scroll hint
    } else {
        // HIDE scroll hint
    }
});

I did this on one of my own web pages.

http://codepen.io/pattmorter/pen/mFDLs

Just check out the javascript and the css.

Answer 2

I think you would need an ID on your icon/link and then have two event listeners. One for clicking on the ID itself and the other onscroll. Once either of those events are fired you can call .remove()

Answer 3

If you don't know where to start, try to read reference of window object. For visibility change you can use opacity, and position attribute to make it fixed at bottom of screen.