Round Pie Button for Nav

by jrweinb

HTML

<div id="cont">
 <div id="icon_cont">
<div id="icon">
  <span><p>1</p></span>
  <span><p>2</p></span>
  <span><p>3</p></span>
  <span><p>4</p></span>
</div> 
</div>
</div>

CSS

@import url(http://weloveiconfonts.com/api/?family=entypo);
 @import url(http://fonts.googleapis.com/css?family=Alef);

/* entypo */
[class*="entypo-"]:before {
    font-family:'entypo', sans-serif
}
* {
    -webkit-font-smoothing:antialiased;
    box-sizing:border-box;
}
body {
    background:#383943;
    width:100%;
    height:100%;
    font-family:helvetica Neue;
    font-weight:100;
}
#icon {
    width:120px;
    border-radius:80px;
    height:120px;
    margin:100px auto;
    box-shadow:0 0 20px rgba(0, 0, 0, .4), 0 0 40px rgba(0, 0, 0, .1);
    -webkit-transform:rotate(45deg);
}
#icon span {
    display:block;
    float:left;
    width:50%;
    height:50%;
    border-bottom:2px solid #383943;
    border-right:2px solid #383943;
    text-align:center;
    color:#ececec;
    line-height:1.5;
    font-size:3.2em;
    background:#df5743;
  position:relative;
    cursor:pointer;
}
#icon > span > p {
    -webkit-transform:rotate(-45deg);
  vertical-align:middle;
  
  text-align:center;
  position: absolute;
}
#icon span:nth-child(1) {
    font-size:22px;
    line-height:1.7;
    border-top-left-radius:80px;
    text-indent:.65em;
}
#icon span:nth-child(2) {
    font-size:22px;
    line-height:.5;
    border-top-right-radius:80px;
    text-indent:-.85em;
}
#icon span:nth-child(3) {
   font-size:22px;
    line-height:.4;
    border-bottom-left-radius:80px;
    text-indent:.45em;
}
#icon span:nth-child(4) {
  font-size:22px;
    line-height:.01;
    border-bottom-right-radius:80px;
    text-indent:-.45em;
}

#icon span:nth-child(4) > p{
  top:0px;
  left:25px;
}

#icon span:nth-child(1) > p{
  top:0px;
  left:15px;
}

#icon span:nth-child(2) > p{
  top:-2px;
  left:30px;
}

#icon span:nth-child(3) > p{
  top:4px;
  left:15px;
}


#icon span:hover {
    color:#df5743;
    background:#ececec;
}
#icon span:nth-child(2), #icon span:nth-child(4) {
    border-right:0;
}
#icon span:nth-child(3), #icon span:nth-child(4) {
    border-bottom:0;
}

#icon_cont{
  width:500px;
 ...

JavaScript

$("span").click(function(){
    var curr_scrolltop = $("#cont").scrollTop();

    var new_scrolltop = curr_scrolltop + 5;
    $("#cont").scrollTop(new_scrolltop);
    
});