Permalink
Browse files

style: restructure scrolling button 跳转按钮代码去重

Add a class to  banish duplication.
Make the code simpler, easier to understand, and more flexible.
增加class,减少重复代码,更清晰,也易于维护。
  • Loading branch information...
MOxFIVE committed Aug 28, 2015
1 parent 4221fd7 commit 31a6b67808b5fcac067ef3efc12156bf1d8f7ad3
@@ -50,7 +50,7 @@
</script>
<div>
<a href="#top" style="color:white"><span id="toTop"></span></a>
<a href="#top" style="color:white"><span class="scrolling-button" id="toTop"></span></a>
</div>
<!-- to top via JavaScript -->
<!--<script>
@@ -62,7 +62,7 @@
}
</script>-->
<div>
<a href="#footer" style="color:white"><span id="toBottom"></span></a>
<a href="#footer" style="color:white"><span class="scrolling-button" id="toBottom"></span></a>
</div>
<!-- to bottom via JavaScript -->
<!--<div id="toBottom">
@@ -399,7 +399,7 @@
padding-left: 1.25em
}
#toTop {
.scrolling-button {
display:block;
padding:0.05em;
border-radius:0.15em;
@@ -413,28 +413,16 @@
position: fixed;
cursor: pointer;
color: #fff;
top: 41%;
right: 1px;
opacity:0.6;
}
#toTop {
top: 41%;
}
#toBottom {
display:block;
padding:0.05em;
border-radius:0.15em;
width:1.1em;
height:1.4em;
line-height:1.3em;
font-size:1.5em;
font-family: Calibri;
text-align: center;
background:lightgray;
position: fixed;
cursor: pointer;
color: #fff;
top: 47%;
right: 1px;
opacity:0.6;
}
/*Set reference's (ol id="reference") in all [post].md*/
@@ -220,7 +220,7 @@
}
}
#toTop {
.scrolling-button {
display:block;
padding:em;
border-radius:0.15em;
@@ -234,26 +234,14 @@
position: fixed;
cursor: pointer;
color: #fff;
top: 37%;
right: 11px;
opacity:0.7;
}
#toTop {
top: 37%;
}
#toBottom {
display:block;
padding:em;
border-radius:0.15em;
width:1.5em;
height:1.5em;
line-height:1.5em;
font-size:2em;
font-family: Calibri;
text-align: center;
background:lightgray;
position: fixed;
cursor: pointer;
color: #fff;
bottom: 37%;
right: 11px;
opacity:0.7;
}

0 comments on commit 31a6b67

Please sign in to comment.