操作jQuery插件打造简捷的回到顶部按钮
|
这次，潜行者m给各人带来一个较量适用的 jQuery 能力，为你的网站添加一个纯代码画出来的、简捷雅观的回到顶部按钮。这个按钮的结果就是，当页面滑动一段间隔之后，就会显露出来这个按钮，点击这个按钮之后，就自动转动到顶部。 点击之后就会跳转到顶部，然后这个按钮滑腻消散。与网上的对比，潜行者m版的是纯代码，加载速率更快，结果色彩节制好；代码精简，只稀有条罢了，拒绝大坨大坨的代码。空话不多说，下面就开始建造。 HTML 布局 我行使了 a 标签作为这个布局，也许不太尺度，可是较量利便。在 a 标签中，内置了一个 span 标签，用来表现三角号。详细代码如下： Copy to Clipboard 引用的内容：[www.veryhuo.com]
<a id="gotop" href="#"> <span>▲</span> </a> 对，你没看错，就这么简朴的一句代码，直接在 a 标签中，填写一个三角号。剩下的就是行使 CSS 举办样式节制。 引用的内容：[www.veryhuo.com]
#gotop{ display:block; width:60px; height:60px; position:fixed; bottom:50px; right:40px; border-radius:10px 10px 10px 10px; text-decoration:none; display:none; background-color:#999999; } 上面这段代码，界说了 a 标签的外面样式，界说 display 为 block，这样，我们才气指定它的 width 和 height。界说 position 为fixed，让它牢靠在右下角。同时为它指定圆角，就是行使 border-radius 属性，定于半径为10px的圆角。 #gotop span{ 上面这一段，就是界说了 span 标签内里的三角号，至于怎样打出这个“三角号”，行使搜狗输入法，按下“Ctrl + Shift + z”，就会弹出搜狗的非凡字符，就可以找到了。这几句代码意思很简朴，就是界说了三角号的外面样式，同时拟定了颜色变革，这是为了用户体验。最下面的 margin-top：4px，则是用来精确定位三角号，让它居中表现。 详细的 jQuery 代码如下，理会已经写在注释内里了： Copy to Clipboard引用的内容：[www.veryhuo.com]
$(function(){ $(window).scroll(function(){ //只要窗口转动,就触发下面代码 var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取转动后的高度 if( scrollt >200 ){ //判定转动后高度高出200px,就表现 $("#gotop").fadeIn(400); //淡出 }else{ $("#gotop").stop().fadeOut(400); //假如返回可能没有高出,就淡入.必需加上stop()遏制之前动画,不然会呈现闪动 } }); $("#gotop").click(function(){ //当点击标签的时辰,行使animate在200毫秒的时刻内,滚到顶部 $("html,body").animate({scrollTop:"0px"},200); }); }); 怎么样，简朴吧？就用这几句代码罢了，就可以呈现这个成果，并且可以利便的修改颜色、外形、巨细等。虽然弱点也是有的，就是在IE6等过期的赏识器中，也许不会兼容，无法实现。 本文来历：水煮鱼博客 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
