返回顶部浮动图标代码

自打网站换了个主题以后,访问起来最痛苦的事情就是需要滚动条拖来拖去的。今天终于给加上一个返回顶部的浮动图标代码,顺带分享下,最近写作热情高涨,苦于没有时间。顺带上图片一张,截图留念这个版本的皮肤。

代码使用很简单,只需要将HTML代码,和jQuery代码放入到网页的尾部即可。另外你可能还需要和我一样盗用人人网的返回顶部图片一张。

HTML代码

1 <div style="display:none;" class="back-to" id="toolBackTop">
2 <a title="返回顶部" onclick="window.scrollTo(0,0);return false;" href="#top" class="back-top">
3 返回顶部</a>
4 </div>

jQuery代码

 1 <script src="js/jquery.min.js" type="text/javascript"></script>
 2 <script type="text/javascript">
 3 $(document).ready(function () {
 4         var bt = $(‘#toolBackTop‘);
 5         var sw = $(document.body)[0].clientWidth;
 6
 7         var limitsw = (sw - 840) / 2 - 80;
 8         if (limitsw > 0){
 9                 limitsw = parseInt(limitsw);
10                 bt.css("right",limitsw);
11         }
12
13         $(window).scroll(function() {
14                 var st = $(window).scrollTop();
15                 if(st > 30){
16                         bt.show();
17                 }else{
18                         bt.hide();
19                 }
20         });
21 })
22 </script>
时间: 2024-10-07 06:33:15

返回顶部浮动图标代码的相关文章

javascript返回顶部几种代码总结

纯js代码 /** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (毫秒) **/ function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; var x1 = 0; var y1 = 0; var x2 = 0; var y2 = 0; var x3 = 0; var y3 = 0; if (document.

PC返回顶部浮动按钮

要添加的css: <style> .up{width:54px;height:54px;background:url(/Images/topback.gif) no-repeat 0 0;filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;}.up:hover{filter:alpha(Opacity=100);-moz-opacity:1;opacity:1;} </style> js代码: var scrolltotop

微网站自动显示 返回顶部 按钮 的代码

//返回顶部 var globalScrollTop = $(document).height() - $(window).height(); function showBackToTop() { if ($(window).scrollTop() > globalScrollTop) { $("#divTop").show(); } else { $("#divTop").hide(); } } //页面滚动时,“返回顶部”按钮 是否显示 $(window)

一句jQuery代码返回顶部

效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: 引用代码: <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script type="text/j

简单返回顶部代码及注释说明

最近做了一个排行榜页面,分类较多,并且以图文形式展示......最后页面明显过长了,用户体验自然不够好.最后想着在页面上部增加了页面内跳转导航,直接导航到本页的分类命名锚块.当然这就需要结合“返回顶部”功能来取得更好的体验了.当然一般情况下首先还是要避免页面过长,内容薄弱关联性不够的跳出率会很高. 下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 h

转载 | 网页中返回顶部代码(多种方法)

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 <a href="#top" target="_self">返回顶部</a> 方法二:操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置) <a href="javascript:scroll(0,0)">返回顶部</a>

简单的返回顶部代码

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 <a href="#top" target="_self">返回顶部</a>方法二:操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置) <a href="javascript:scroll(0,0)">返回顶部</a> 

博客园安装jQuery返回顶部代码教程

博客园支持上传js文件,这给博主提供了很大的拓展空间,例如返回顶部的jQuery代码. 首先先上传返回顶部图片到博客园 topback.gif: 然后在scrolltopcontrol.js中找到topback.gif的地址,将其替换成上传至博客园中的文件地址(右键topback.gif → 复制链接地址) scrolltopcontrol.js 代码: var scrolltotop={ setting:{ startline:100, //起始行 scrollto:0, //滚动到指定位置

返回顶部代码!

返回顶部代码! <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script></head><style