美文网首页
返回顶部的几种方法

返回顶部的几种方法

作者: sakatayui酱 | 来源:发表于2017-07-06 22:28 被阅读0次

    有时候网页太长,我们想要回到网页顶部很麻烦。

    这时候我们需要一个返回顶部的效果。

    要实现返回顶部,有很多方法。

    1.使用HTML的锚标记是最简单的方法。

    但是缺点是样式不好看

    例子:<a href="top" id='top'></a> 标签只要靠近顶部就行

    <a href='#top' target='_self'>返回顶部</a>

    2.使用Scroll函数返回顶部

    scrooll函数用来控制滚动条的位置,有两种很简单的实现方式:

    (1):

    返回顶部

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

    (2)缓慢向上:

    这个方法是渐进式的返回顶部,比上一种好看一些:

    例子:

    functionpageScroll() {window.scrollBy(0,-10);scrolldelay=setTimeout('pageScroll()',100);}

    <a href="pageScroll()">返回顶部</a>

    这样就会动态返回顶部,只不过虽返回顶部但是代码仍在运行,还需要停止掉

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

    3.用JQuery动画来实现

    这里用到了jquery的自定义动画来实现功能

    $('html, body').animate({ scrollTop: 0 },'fast')

    4.不用动画的jQuery

    例子:

    $('html,body').scrollTop(0);

    5.纯js 无动画版本

    window.scrollTo(0,0)

    6.纯js 动画版本

    生硬版:

    varscrollToTop=window.setInterval(function() {

    varpos=window.pageYOffset;

    if ( pos>0 ) {

    window.scrollTo( 0, pos - 20 ); // how far to scroll on each step

    } else {

    window.clearInterval( scrollToTop );

    }

    }, 16); // how fast to scroll (this equals roughly 60 fps)

    流畅版:

    (function smoothscroll(){

    varcurrentScroll=document.documentElement.scrollTop || document.body.scrollTop;

    if (currentScroll>0) {

    window.requestAnimationFrame(smoothscroll);

    window.scrollTo (0,currentScroll - (currentScroll/5));

    }

    })();

    相关文章

      网友评论

          本文标题:返回顶部的几种方法

          本文链接:https://www.haomeiwen.com/subject/gqdkhxtx.html