pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

仿CSDN Blog返回頁面頂部功能實現(xiàn)原理及代碼_htm

仿CSDN Blog返回頁面頂部功能實現(xiàn)原理及代碼_html5教程技巧HTML5中文學(xué)習(xí)網(wǎng),是中國最大的HTML5中文門戶,為廣大HTML5愛好者提供各種HTML5資料,包括HTML5網(wǎng)站、HTML5資訊、HTML5應(yīng)用、HTML5游戲
點評:仿CSDN Blog返回頁面頂部功能只修改了2個地方:返回的速度-->改成了慢慢回去,返回頂部圖標(biāo)出現(xiàn)的時機-->改成了只要不在頂部就顯示出來,具體代碼如下,感興趣的朋友可以參考下哈
 
 

只修改了2個地方:
,返回的速度-->改成了慢慢回去。(原來是一閃而返回)
,返回頂部圖標(biāo)出現(xiàn)的時機-->改成了只要不在頂部就顯示出來。(原來是向下滾動500px后才顯示)

注意:JS務(wù)必要寫在 Html之后;
HTML

 

復(fù)制代碼
代碼如下:

<div id="d-top" style="display:none;">
<a id="d-top-a" href="#" title="回到頂部">
<img src="http://static.blog.csdn.net/images/top.png" alt="TOP" /></a>
</div>
 


Javascript代碼

 

復(fù)制代碼
代碼如下:

<script type="text/javascript">
$(function(){
var d_top=$('#d-top');
document.onscroll=function(){
var scrTop=(document.body.scrollTop||document.documentElement.scrollTop);
if(scrTop>500){
if(scrTop>0){
d_top.show();
}else{
d_top.hide();
}
}
$('#d-top-a').click(function(){
$("html,body").animate({scrollTop: 0},500);
//scrollTo(0,0);
this.blur();
return false;
});
});
</script>
 


CSS樣式

 

復(fù)制代碼
代碼如下:

#d-top {
position: fixed;
float: right;
z-index: 10;
right: 10px;
bottom: 40px;
}
#d-top img {
width: 42px;
opacity: 0.3;
}
img {
border: medium none;
}
 


 

 
 
【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外,其他素材未做測試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。

相關(guān)文檔推薦

主站蜘蛛池模板: 水厂自动化|污水处理中控系统|水利信息化|智慧水务|智慧农业-山东德艾自动化科技有限公司 | LZ-373测厚仪-华瑞VOC气体检测仪-个人有毒气体检测仪-厂家-深圳市深博瑞仪器仪表有限公司 | 济宁工业提升门|济宁电动防火门|济宁快速堆积门-济宁市统一电动门有限公司 | 氧化铁红厂家-淄博宗昂化工| 植筋胶-粘钢胶-碳纤维布-碳纤维板-环氧砂浆-加固材料生产厂家-上海巧力建筑科技有限公司 | 齿辊分级破碎机,高低压压球机,立式双动力磨粉机-郑州长城冶金设备有限公司 | 首页_中夏易经起名网| 钢板仓,大型钢板仓,钢板库,大型钢板库,粉煤灰钢板仓,螺旋钢板仓,螺旋卷板仓,骨料钢板仓 | 振动时效_振动时效仪_超声波冲击设备-济南驰奥机电设备有限公司 北京宣传片拍摄_产品宣传片拍摄_宣传片制作公司-现像传媒 | 智能风向风速仪,风速告警仪,数字温湿仪,综合气象仪(气象五要素)-上海风云气象仪器有限公司 | 播音主持培训-中影人教育播音主持学苑「官网」-中国艺考界的贵族学校 | 元拓建材集团官方网站| 德国EA可编程直流电源_电子负载,中国台湾固纬直流电源_交流电源-苏州展文电子科技有限公司 | SEO网站优化,关键词排名优化,苏州网站推广-江苏森歌网络 | 澳威全屋定制官网|极简衣柜十大品牌|衣柜加盟代理|全屋定制招商 百度爱采购运营研究社社群-店铺托管-爱采购代运营-良言多米网络公司 | 无线遥控更衣吊篮_IC卡更衣吊篮_电动更衣吊篮配件_煤矿更衣吊篮-力得电子 | 剪刃_纵剪机刀片_分条机刀片-南京雷德机械有限公司 | 中开泵,中开泵厂家,双吸中开泵-山东博二泵业有限公司 | 热熔胶网膜|pes热熔网膜价格|eva热熔胶膜|热熔胶膜|tpu热熔胶膜厂家-苏州惠洋胶粘制品有限公司 | 地源热泵一体机,地源热泵厂家-淄博汇能环保设备有限公司 | 民用音响-拉杆音响-家用音响-ktv专用音响-万昌科技 | 石栏杆_青石栏杆_汉白玉栏杆_花岗岩栏杆 - 【石雕之乡】点石石雕石材厂 | 浙江自考_浙江自学考试网 | 冷水机-冰水机-冷冻机-冷风机-本森智能装备(深圳)有限公司 | 臭氧发生器_臭氧消毒机 - 【同林品牌 实力厂家】 | 真石漆,山东真石漆,真石漆厂家,真石漆价格-山东新佳涂料有限公司 | 干洗加盟网-洗衣店品牌排行-干洗设备价格-干洗连锁加盟指南 | 五轴加工中心_数控加工中心_铝型材加工中心-罗威斯 | 广州昊至泉水上乐园设备有限公司 | 撕碎机_轮胎破碎机_粉碎机_回收生产线厂家_东莞华达机械有限公司 | 行星齿轮减速机,减速机厂家,山东减速机-淄博兴江机械制造 | 工作心得_读书心得_学习心得_找心得体会范文就上学道文库 | 管家婆-管家婆软件-管家婆辉煌-管家婆进销存-管家婆工贸ERP | STRO|DTRO-STRO反渗透膜(科普)_碟滤 | 深圳快餐店设计-餐饮设计公司-餐饮空间品牌全案设计-深圳市勤蜂装饰工程 | 变色龙PPT-国内原创PPT模板交易平台 - PPT贰零 - 西安聚讯网络科技有限公司 | 奥运星-汽车性能网评-提供个性化汽车资讯| 玻璃瓶厂家_酱菜瓶厂家_饮料瓶厂家_酒瓶厂家_玻璃杯厂家_徐州东明玻璃制品有限公司 | 爱佩恒温恒湿测试箱|高低温实验箱|高低温冲击试验箱|冷热冲击试验箱-您身边的模拟环境试验设备技术专家-合作热线:400-6727-800-广东爱佩试验设备有限公司 | 代理记账_公司起名核名_公司注册_工商注册-睿婕实业有限公司 | 安徽净化工程设计_无尘净化车间工程_合肥净化实验室_安徽创世环境科技有限公司 |