jQuery实现回到顶部功能-创新互联

在网页中,我们经常会由于网页内容过长,而需要在浏览网页时有一个快速回到网页顶部的功能,在浏览网页内容离顶部有一段距离时,出现快速回到网页顶部的工具,从而能使我们的网页更人性化。

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:国际域名空间、网页空间、营销软件、网站建设、金林网站维护、网站推广。

以下分为几个步骤来实现:

步骤1:引入jquery库

<script type="text/javascript" src="js/jquery-1.8.0.js"></script>

步骤2:在网页中引入回到顶部的网页元素,并且设置元素的样式

<div id="gotop"></div>设置元素样式,默认开始隐藏

<style type="text/css">

#gotop{

display:none;

width:55px;

height:55px;

position:fixed;

right:50px;

bottom:50px;

url(p_w_picpaths /backtop2013.png) no-repeat -70px 0px;

}

</style>

步骤3:定义js来控制元素的渐显、渐隐功能,并且控制网页滚动条的位置。

<script type="text/javascript">

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();//实现回到顶部元素的渐显与渐隐

});

</script>

按照上面的3个步骤,将可以实现回到顶部的功能。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。

本文标题:jQuery实现回到顶部功能-创新互联
网址分享:https://www.cdcxhl.com/article26/ddigjg.html

成都网站建设公司_创新互联,为您提供网站设计网页设计公司定制开发品牌网站建设网站制作网站排名

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网站建设公司