jQuery实现回到顶部功能
在网页中,我们经常会由于网页内容过长,而需要在浏览网页时有一个快速回到网页顶部的功能,在浏览网页内容离顶部有一段距离时,出现快速回到网页顶部的工具,从而能使我们的网页更人性化。
信州网站建设公司创新互联公司,信州网站设计制作,有大型网站制作公司丰富经验。已为信州上1000+提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱,请找那个售后服务好的信州做网站的公司定做!
以下分为几个步骤来实现:
步骤1:引入jquery库
步骤2:在网页中引入回到顶部的网页元素,并且设置元素的样式
设置元素样式,默认开始隐藏#gotop{
display:none;
width:55px;
height:55px;
position:fixed;
right:50px;
bottom:50px;
url(p_w_picpaths /backtop2013.png) no-repeat -70px 0px;
}
步骤3:定义js来控制元素的渐显、渐隐功能,并且控制网页滚动条的位置。
function goTop({
$(window).scroll(function(e) {
//若滚动条离顶部大于100元素
if($(window).scrollTop()>100)
$("#gotop").fadeIn(1000);//以1秒的间隔渐显id=gotop的元素
else
$("#gotop").fadeOut(1000);//以1秒的间隔渐隐id=gotop的元素
});
1};
$(function(){
//点击回到顶部的元素
$("#gotop").click(function(e) {
//以1秒的间隔返回顶部
$('body,html').animate({scrollTop:0},1000);
});
$("#gotop").mouseover(function(e) {
$(this).css("background","url(p_w_picpaths/backtop2013.png) no-repeat 0px 0px");
});
$("#gotop").mouseout(function(e) {
$(this).css("background","url(p_w_picpaths/backtop2013.png) no-repeat -70px 0px");
});
goTop();//实现回到顶部元素的渐显与渐隐
});
按照上面的3个步骤,将可以实现回到顶部的功能。
网站名称:jQuery实现回到顶部功能
URL标题:http://ybzwz.com/article/jodied.html