联系QQ:3490313997
网站建设

JavaScript简单返回顶部代码实例

时间:2021-11-19 10:50:21

  更多返回顶部jquery特效代码、返回顶部js特效代码、返回顶部网页代码,js常用返回网页顶部方法,js返回顶部实例、JS简单返回顶部代码实现欢迎分享。

  实现网站底部返回顶部的方法有很多种,最简单就是使用锚标记方法直接跳到顶部。目前使用最多的就是jquery返回网页顶部代码。返回顶部方法要么是直接跳到到顶部,要么是滚动效果返回网页顶部。以下介绍两种简单的返回顶部js代码。(请将鼠标滑动到网站底部,再点击返回)

简单返回顶部代码实例

  1、简单的js直接跳转到顶部代码实例,如下(添加到你网站底部即可):
    <!-- 返回顶部 -->

   <a href="#0" class="cd-top"></a>
    <style>.cd-top {width:25px;height:69px;display: inline-block;
    position: fixed;bottom: 30px;right: 18px;background: url(http://www.bokequ.com/blog/yanlingjiao/images/top.png) no-repeat;}</style>
    <script type="text/javascript">
    $('.cd-top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);return
    false;});
    </script>


    <!-- 返回顶部 -->
    <a href="#0" class="cd-top"></a>
    <style>.cd-top {width:25px;height:69px;display: inline-block;
    position: fixed;bottom: 30px;right: 18px;background: url(http://www.bokequ.com/blog/yanlingjiao/images/top.png) no-repeat;}</style>
    <script type="text/javascript">
    $(".cd-top").click(function () {
    var speed=500;//滑动的速度
    $('body,html').animate({ scrollTop: 0 }, speed);
    return false;
    });
    $(window).scroll(function() {
    height =$(document).scrollTop();
    if(height > 500){
    $(".cd-top").show()
    }else{
    $(".cd-top").hide()
    };
    });
    </script>

  效果显示:http://www.bokequ.com/blog/yanlingjiao/1.html

  2、简单的js慢速滚动返回顶部代码实例
    <!-- 返回顶部 -->
    <style>.cd-top {width:40px;height:40px;display: inline-block;position:
    fixed;bottom: 30px;right: 18px;overflow: hidden;background: url(http://www.bokequ.com/blog/sikongqi/images/top.png) no-repeat;}
    </style>
    <a href="javascript:returnTop();" class="cd-top"></a>
    <script type="text/javascript">
    var sdelay=0;
    function returnTop() {
    window.scrollBy(0,-100);//Only for y vertical-axis
    if(document.body.scrollTop>0) {
    sdelay= setTimeout('returnTop()',50);
    }
    }
    </script>

  ps:这里使用的是scrollBy函数慢速滚动返回顶部,scrollBy函数第二个参数-100表示越大(比如-10)滚动越慢,越小滚动越快。低级版本浏览器无效。

  效果显示http://www.bokequ.com/blog/sikongqi/2.html

  以上两种返回顶部代码,使用Js比较少,无需大量JS代码文件。当然每个js效果都有它的不足之处。喜欢的网友可直接复制代码到网站相关位置。更多代码效果可自行修改,如:背景background可换成其它图标或删除,用文字"返回顶部"来代替。

最新收录
  • 高校人才网

    高校人才网是一家专注于收集发布各类公职人员招聘信息的专业网站。人事招聘信息包括:行政事业单位公开招聘,高校招聘,中小学校招聘,医疗卫生单位招聘,研究机构招聘,银行招聘,名企招聘,公务员招考信息等,并为用人单位提供信息发布和广告宣传服务

  • 中国公共招聘网

    中国公共招聘网是人力资源和社会保障部主办的公共就业服务网,主要发布招聘信息,招聘会信息,事业单位公开招聘信息,市场资讯等信息,旨在为广大劳动者免费提供信息真实、内容完整、岗位有效、查询便利的信息

  • 智联招聘

    智联招聘全国招聘网是全国权威的求职找工作平台,为您提供真实准确的全国求职招聘信息,每天几百万的高薪职位招聘信息供您选择,找工作上智联招聘

  • 拉勾招聘

    拉勾招聘是专业的互联网求职招聘网站。致力于提供真实可靠的互联网岗位求职招聘找工作信息,拥有海量的互联网人才储备,互联网行业找工作就上拉勾招聘,值得信赖的求职招聘网站。

  • 南方人才网

    南方人才网是广州人才集团官方唯一人才网,提供最新最全的人才职位招聘信息。主营人才招聘、人才培训、猎头、网络招聘、报纸招聘、薪酬调查、档案挂靠等服务。

  • 杭州人才网

    杭州人才网提供档案查询、职称查询、企业招聘、人才求职以及各类以人事案管理、人才招聘、毕业生服务、劳务派遣、职称评定、人才培训等人事人才公共服务。