Un-hide div when window is scrolled down using jQuery and CSS

Question

I'm trying to display a small 'back to top' div when I scroll down on my site. Here is the code for my div (the style is inline whilst in development until I go through and move it all to a base.css file later on). ```

Back to Top

``` Fairly straightforward as you can see. I'm then trying to use jQuery to detect when the window has been scrolled down slightly to then show the div: ``` $(window).scroll(function(){ if($document).scrollTop() > 0){ $('#backToTop').show(); }else{ $('#backToTop').hide(); } }); ``` My problem is that the script doesn't appear to be triggered. When I scroll down the page, the div does not appear. I have additional jQUery on my page for form validation so I have tried including this alongside that function within: ``` $().ready(function(){ /* Code goes here */ } ``` I've also tried inc…

Accepted Answer

You have a typo in your code:

```
if($document).scrollTop() > 0){
```

There's a missing `(`:

```
if( $(document).scrollTop() > 0 ) {
     ^
```

Here's a working example: http://jsfiddle.net/U7scm/

Edit

I also noticed that you're setting `visibility: hidden`. jQuery's `.show()` and `.hide()` functions will toggle the `display` property, so use `display: none` instead of `visibility: hidden`

Un-hide div when window is scrolled down using jQuery and CSS

Solution

Problem