[代码收集]JS仿腾讯QQ音乐返回顶部/留言评论/返回底部右下角跟随 - 笑忘书网页代码收藏馆 - 35230.WODEMO.COM

首页-代码 2014-04-07 00:04:00 -0400

★JS仿腾讯QQ音乐返回顶部/留言评论/返回底部右下角跟随★

请勿抄袭本页面

代码说明

此效果是模仿QQ音乐返回顶部和返回底部代码，使用了锚点最基本的功能，无JS，保证了最快的加载速度。（牺牲掉了原来鼠标移上缓缓滚动的效果）。转自懒人图库

使用方法及注意事项使用前请先阅读本内容

请先在网页顶部和底部分别加入<a name="gotop"></a>和<a name="gobottom"></a>

html代码

在网页顶部放置本代码

在网页适合位置添加

<style type="text/css">
.go{width:47px;height:106px;background-color:#FFF;position:fixed;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||200)-(parseInt(this.currentStyle.marginBottom,10)||0)));right:12px;bottom:25%;border-radius:5px;box-shadow:0 0 2px #6E6E6E}
.go a{background:url(http://b.wodemo.com/distribution/275178/0774ac5fcf85372f050c413192c88a38/a.png) no-repeat;display:block;text-indent:999em;width:37px;margin:5px;border:0;overflow:hidden;float:left}
.go .top{background-position:0 -33px;height:22px}
.go .feedback{background-position:0 -54px;height:32px}
.go .bottom{background-position:0 -88px;height:22px}
.go .top:hover{background-position:-38px -33px}
.go .feedback:hover{background-position:-38px -54px}
.go .bottom:hover{background-position:-38px -88px}
</style>

<div class="go">
	<a title="返回顶部" class="top" href="#gotop"></a>
	<a title="点此给我留言" class="feedback" href="http://35230.wodemo.com/entry/169823" target="_blank"></a>
	<a title="返回底部" class="bottom" href="#gobottom"></a>
</div>

在网页底部放置本代码

a.png (9.97 KiB) | Meta

代码演示

请看右下角

[代码仅供参考，转载请注明出处]

----Comments(4)----
小叮当 (@dingdang) | @ at 2015-08-08 13:24:
白色的。。。

李丹高 (@myrj) | @ at 2014-05-10 09:54:
问鼎网(www.ones2.tk) - 问鼎天下！

囍 (@lydrj) | @ at 2014-05-06 22:17:
okl .顶个

迷茫者的微笑 (@1044529113) | @ at 2014-04-18 13:24:
顶个

Subscribe | Register | Login | N