使用jquery构建Metro style 返回顶部】的更多相关文章

个人一直对metro风格的东西情有独钟,偶然间在腾讯网看到一款小插件,蓝色Metro风格的,所以决定把它放到我的博客中,这样做应该不会有版权问题吧orz.. Complete code 后言 我把他原来的相关阅读换成二维码了,由于本人前端技术捉襟见肘只能用人家写好的css,自己稍微改点,另外觉得可以不依赖jq,用纯生js实现这样也许会好点. GIF & Firefox 3D视图      ↑↑source code↑↑ 小清新风格 今天没事又做了一款只有返回按钮的,在Edit fiddle预览中…
兼容各大主流浏览器,jQuery返回顶部,一句代码搞定 <a class="top" href="javascript:;" style="position:fixed;bottom:20px;right:20px;">Back to top</a> <script> $('.top').click(function (e) { $('html, body').animate({scrollTop: 0}, 8…
先引入js:<script type="text/javascript" src="jquery.js" ></script><script type="text/javascript" src="towhere.js" ></script> 假设页面: <body> <a href="javascript:;" id="to-bo…
jquery代码: function gotoTop(min_height){ //预定义返回顶部的html代码,它的css样式默认为不显示 var gotoTop_html = '<div id="gotoTop">返回顶部</div>'; //将返回顶部的html代码插入页面上id为page的元素的末尾 $("#page").append(gotoTop_html); $("#gotoTop").click(//定义返…
为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下面,我分享一下我自己经常使用的一个返回按钮,当然,你也可以在这个基础上修改或者自己做一个. 示例:http://www.feikk.com/demo/go_top.html 建议将以下代码放在包函文件中,这样不必每个页面都添加,日后也好维护. 正文如下: 一.先调用jquery. <!-- 这里是用…
样式: <style type="text/css"> /*返回顶部特效*/ a { border: none; text-decoration: none; outline: none; /*移除虚线框 IE8,FF有用*/ hide-focus: expression(this.hideFocus=true); /*IE6.IE7*/ } *html { background-image: url(about:blank); background-attachment:…
一句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 ty…
jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的动画,然后用到web移动端却没什么卵用,会出现滚动不流畅,卡顿,失灵等等现象. 这是因为移动端的scroll事件触发不频繁,有可能检测不到有<=0的情况 为此,移动端判断次数好些,下面是具体实现代码,兼容pc: <!DOCTYPE html> <html> <head>…
转自:http://blog.csdn.net/itmyhome1990/article/details/25340705 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图               第一种实现 一.JSP或HTML(主体结构) 在body中添加 <body id="top"> <p id="back-to-top"><a href="#top"><span>…
jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery返回顶部</title> <style> *body{ background-attachment: fixed; background-image: url(about:blank); /* 必须的,防抖…