当前位置:首页 > 网站制作教程 > 正文

html返回顶部代码

目录导航
  • HTML锚标记返回顶部
  • Javascript Scroll函数返回顶部
  • 使用Onload加上scroll功能实现动态返回顶部
  •   哈喽!大家好,欢迎来到牛牛博客,今天简单给大家讲下html返回顶部代码。

      HTML锚标记返回顶部

      顶部:放置在<body>标签后面,只要靠近顶部即可。

    <aname="top"id="top"></a>

      底部:页面底部放置

    <ahref="#top"target="_self">返回顶部</a

      Javascript Scroll函数返回顶部

      scroll第一个参数是水平位置,第二个参数是垂直位置,比如要想定位在垂直50像素处,改成scroll(0,50)就可以了。

    <ahref="javascript:scroll(0,0)">返回顶部</a>

      本方式是渐进式返回顶部,要好看一些,代码如下:

    functionpageScroll() {window.scrollBy(0,-10);scrolldelay=setTimeout('pageScroll()',100);}<ahref="pageScroll();">返回顶部</a>

       动态返回顶部,不过虽然返回到顶部但是代码仍在运行,还需要在pageScroll函数加一句给停止掉。

    if(document.documentElement.scrollTop==0)clearTimeout(scrolldelay);

      使用Onload加上scroll功能实现动态返回顶部

      在网页body标签结束之前加上

    <divid="gotop">返回顶部</div>

      再调用以下JS脚本部分:

    BackTop=function(btnId){varbtn=document.getElementById(btnId);vard=document.documentElement;window.onscroll=set;btn.onclick=function(){btn.style.display="none";window.onscroll=null;this.timer=setInterval(function(){d.scrollTop-=Math.ceil(d.scrollTop*0.1);if(d.scrollTop==0)clearInterval(btn.timer,window.onscroll=set);},10);};functionset(){btn.style.display=d.scrollTop?'block':"none"}};BackTop('gotop');

      可以独立存成一个js文件,比如gotop.js,再通过以下形式:

    <scriptsrc="/js/gotop.js"type=text/javascript></script>


    发表评论

    推荐文章

    最新文章

    取消
    扫码支持 支付码