给WordPress添加有趣的GoTop

发布于 2017-06-06  1.67k 次阅读


<a class="back2top">
<svg version="1.1" id="jj" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;stroke:#999999;stroke-width:5;stroke-miterlimit:10;}
</style>
<path class="st0" d="M138.9,187.1H71.8V44.8c0-4.1,3.4-7.5,7.5-7.5h52.1c4.1,0,7.5,3.4,7.5,7.5V187.1z"/>
<path class="st0" d="M138.9,34.9c0,15.9-15,20.4-33.5,20.4s-33.6-4.5-33.6-20.4c0-14.5,9.9-26.6,26.2-28.6c1.6-0.2,5.9,1.2,7.5,1.2
	c2,0,5.6-1.3,7.5-1.1C128.8,8.8,138.9,20.6,138.9,34.9z"/>
<polygon class="st0" points="105.5,23.4 105.5,19.4 105.5,8.7 105.5,12.7 "/>
<path class="st0" d="M65.5,195L65.5,195c-16.5,0-29.9-13.4-29.9-29.9l0,0c0-16.5,13.4-29.9,29.9-29.9l0,0
	c16.5,0,29.9,13.4,29.9,29.9l0,0C95.4,181.6,82,195,65.5,195z"/>
<path class="st0" d="M146,195L146,195c-16.5,0-29.9-13.4-29.9-29.9l0,0c0-16.5,13.4-29.9,29.9-29.9l0,0c16.5,0,29.9,13.4,29.9,29.9
	l0,0C175.9,181.6,162.5,195,146,195z"/>
</svg>
<span>
	<svg version="1.1" id="jj" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;stroke:#999999;stroke-width:5;stroke-miterlimit:10;}
</style>
<path class="st0" d="M138.9,187.1H71.8V44.8c0-4.1,3.4-7.5,7.5-7.5h52.1c4.1,0,7.5,3.4,7.5,7.5V187.1z"/>
<path class="st0" d="M138.9,34.9c0,15.9-15,20.4-33.5,20.4s-33.6-4.5-33.6-20.4c0-14.5,9.9-26.6,26.2-28.6c1.6-0.2,5.9,1.2,7.5,1.2
	c2,0,5.6-1.3,7.5-1.1C128.8,8.8,138.9,20.6,138.9,34.9z"/>
<polygon class="st0" points="105.5,23.4 105.5,19.4 105.5,8.7 105.5,12.7 "/>
<path class="st0" d="M65.5,195L65.5,195c-16.5,0-29.9-13.4-29.9-29.9l0,0c0-16.5,13.4-29.9,29.9-29.9l0,0
	c16.5,0,29.9,13.4,29.9,29.9l0,0C95.4,181.6,82,195,65.5,195z"/>
<path class="st0" d="M146,195L146,195c-16.5,0-29.9-13.4-29.9-29.9l0,0c0-16.5,13.4-29.9,29.9-29.9l0,0c16.5,0,29.9,13.4,29.9,29.9
	l0,0C175.9,181.6,162.5,195,146,195z"/>
</svg>
 
</span>
</a>

CSS:

.back2top {z-index:99;position:fixed;right:40px;bottom:60px;width: 90px;height: 40px;cursor:pointer;transition: 2s all;}
.back2top svg {width: 100%;height: auto;}
.back2top span {width: 90px;height: 45px;position: absolute;top: 0;left: 0;overflow: hidden;display: block;}
.back2top:hover span {transform: translateY(-15px);}

by 小成


表哥网,一个喜欢折腾的90后搭建的网站。