转换为语音并朗读全文 00:00 / 00:00

给网站加个返回顶部、返回底部的按钮,很简单很实用很友好。只需一句html插入代码、一句CSS美化代码、一句jQuery滑动代码,就可以搞定啦!

如图所示:其中包含返回顶部、页面锚点跳转、onclick新窗口链接、onclick当前窗口打开链接、返回底部。可以根据需要,增减相应按钮。

 美化版返回顶部、返回底部按钮代码。

CSS代码

/*返回顶部和底部CSS代码,使用请直接粘贴至相应CSS文件内 www.yuxiaoxi.net*/
#gotop{position:fixed;top:45%;right:10px;display:block;}
#shang{background:url(top.png) no-repeat;position:relative;cursor:pointer;height:35px;width:35px;margin:10px 0;}
#shang:hover{background-position: -35px 0;}
#zhong1{background:url(zhong1.png) no-repeat;position:relative;cursor:pointer;height:35px;width:35px;margin:10px 0;}
#zhong1:hover{background-position: -35px 0;}
#zhong2{background:url(zhong2.png) no-repeat;position:relative;cursor:pointer;height:35px;width:35px;margin:10px 0;}
#zhong2:hover{background-position: -35px 0;}
#newwindows1{background:url(newwindows1.png) no-repeat;position:relative;cursor:pointer;height:35px;width:35px;margin:10px 0;}
#newwindows1:hover{background-position: -35px 0;}
#newwindows2{background:url(newwindows2.png) no-repeat;position:relative;cursor:pointer;height:35px;width:35px;margin:10px 0;}
#newwindows2:hover{background-position: -35px 0;}
#xia{background:url(down.png) no-repeat;position:relative;cursor:pointer;height:35px;width:35px;margin:10px 0;}
#xia:hover{background-position: -35px 0;}

jQuery代码

jQuery(document).ready(function($){                            
$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 600);});
//点击id="shang"对象时,滑动至相对浏览器滚动条为0px(即顶部),时间为600毫秒
$('#zhong1').click(function(){$('html,body').animate({scrollTop:$('#abcd').offset().top}, 500);});
//点击id="zhong1"对象时,滑动至id="abcd"相对浏览器滚动条的距离,时间为500毫秒
$('#zhong2').click(function(){$('html,body').animate({scrollTop:$('#abcde').offset().top}, 500);});
//点击id="zhong2"对象时,滑动至id="abcde"相对浏览器滚动条的距离,时间为500毫秒
$('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});
//点击id="xia"对象时,滑动至id="footer"相对浏览器滚动条的距离(即底部),时间为800毫秒
//注意各id(#)或者class(.)之间对应的关系,不然按钮会没反应

});
window.onscroll=function(){
    var topDiv = document.getElementById("shang"); //返回顶部按钮显现的位置,相对浏览器滚动条距离顶部100px,可按需修改
    if(document.documentElement.scrollTop>100){
        topDiv.style.visibility = "visible";
    }else{ 
        topDiv.style.visibility = "hidden"; 
    } 
}

html代码

 

 

 

 

如果你觉得文章不错,可以给点小小奖励~

微信

微信

支付宝

支付宝

带符号 * 的表示必填项
  1. 破斧沉舟
    破斧沉舟

    每日签到,签到时间:上午11:21:12

    回复
  2. 菜贩儿
    菜贩儿

    其实我也是很喜欢这个代码,可是要怎么添加呢,请给出详细教程

    回复
  3. 麻辣妹妹
    麻辣妹妹

    博主你好 这个jQuery代码是加到哪里?是css嘛?还是header文件,然后又是加到文件的那个位置,谢谢

    回复
  4. haze
    haze

    每日打卡,打卡时间:下午4:40:39

    回复