Question: How should I specify CSS (preferebly only CSS, or alternatively CSS + JS) for the "to top" button in the page, so that the button is visible only if the content of the page is longer than the height of the user's screen. I do not want to have the button visible if the content of the specific page fits in well in the single screen in the specific device (without the necessity to scroll it). The code for the button is simple:

```
<a href="#top" class="arrow-top">Top</a>

```

Answer: 
```js
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 100) {
$('.arrow-top').fadeIn();
} else {
 $('.arrow-top').fadeOut();
}
});
```

```css
body{
height: 2000px;
}

.arrow-top{
display: none;
position: fixed;
bottom: 2px; 
right: 10px;
padding: 10px;
background: #222;
color: #ddd;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<a class="arrow-top" href="">Top</a>
</body>
```

Use jquery scroll function to show or hide an element on scroll. Get reference from the below code.

```
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 100) {
$('.arrow-top').fadeIn();
} else {
 $('.arrow-top').fadeOut();
}
});

```

Set `display: none;` for `.arrow-top` initially in your css. and it will only show if you scroll the document below 100px. You can adjust the scroll height as per your requirements. 

**Edit : Updated with snippet.**

Hope this help.
```js
if( $(window).height()<$("body").height()){
  $(".arrow-top").show();
}
```

```css
.arrow-top {
    position: fixed;
    bottom: 6%;
    right: 1.5%;
    display: none;
    z-index: 9999;
    background: transparent;
    border: 3px solid #e82a62;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    text-align: center;
    font-size:50px;
    text-decoration:none;
    color:#e82a62;
    }
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> 
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
  <p>Bala</p>
</div>
<a href="#top" style="display:none;" class="arrow-top">^</a>
```