Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>FDW - Scrolling</title>
</head>
<body>
    <div id = "arriba">Ir arriba</div>
    <div id = "enlaces">
        <a href = "#uno">Ir a la sección 1</a>
        <a href = "#dos">Ir a la sección 2</a>
        <a href = "#tres">Ir a la sección 3</a>
        <a href = "#cuatro">Ir a la sección 4</a>
    </div>
​
    <section id = "uno">UNO</section>
    <section id = "dos">DOS</section>
    <section id = "tres">TRES</section>
    <section id = "cuatro">CUATRO</section>
</body>
</html>
 
*{
    transition: all ease .75s;
}
​
a{
    display: block;
    color: blue;
}
​
section{
    width: 25em;
    height: 30em;
    border: .1em lightgray solid;
    color: navy;
    font-size: 1.5em;
    font-family: Verdana;
    margin-top: .5em;
}
​
section:nth-child(even){
    background: aquamarine;
}
​
section:nth-child(odd){
    background: lightcyan;
}
​
#enlaces{
    height: 5em;
}
​
#arriba{
    position: fixed;
    opacity: 0;
    width: 7em;
    height: 7em;
    right: .5em;
    bottom: .5em;
    border-radius: 5em;
    font-size: 1.2em;
    background: darkorchid;
    text-align: center;
    line-height: 7em;
    color: whitesmoke;
    cursor: pointer;
}
 
var arriba = document.getElementById("arriba"),
    body = document.body;
​
window.addEventListener("scroll", function(){
    if (this.scrollY > 80)
        arriba.style.opacity = 1;
    else
        arriba.style.opacity = 0;
}, false);
​
arriba.addEventListener("click", function(){
    body.scrollTop = 0;
}, false);
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Alexis88pro
0viewers