js或jQuery实现返回顶部功能------Sestid

迈不过友情╰ 2024-04-18 10:32 54阅读 0赞

## 1、纯js,无动画版本 ##

window.scrollTo(x-coord, y-coord);  
    window.scrollTo(0,0);

## 2、纯js，带动画版本 ##

生硬版：

流畅版：

(function smoothscroll(){
        var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
        if (currentScroll > 0) {
             window.requestAnimationFrame(smoothscroll);
             window.scrollTo (0,currentScroll - (currentScroll/5));
        }
    })();

## **3、jQuery,带动画版本(包括html，css，js)** ##

首先需要在顶部添加如下html元素：

其中a标签指向锚点top，可以在顶部防止一个`<a name="top"></a>`的锚点，这样在浏览器不支持js时也可以实现返回顶部的效果了。

要想让返回顶部的图片显示在右侧，还需要一些css样式，如下：

p#back-to-top{
        position:fixed;
        display:none;
        bottom:100px;
        right:80px;
    }
    p#back-to-top a{
        text-align:center;
        text-decoration:none;
        color:#d1d1d1;
        display:block;
        width:64px;
        /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
        -moz-transition:color 1s;
        -webkit-transition:color 1s;
        -o-transition:color 1s;
    }
    p#back-to-top a:hover{
        color:#979797;
    }
    p#back-to-top a span{
        background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px;
        border-radius:6px;
        display:block;
        height:64px;
        width:56px;
        margin-bottom:5px;
        /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
        -moz-transition:background 1s;
        -webkit-transition:background 1s;
        -o-transition:background 1s;
    }
    #back-to-top a:hover span{
        background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px;
    }

上面样式中的背景图片是雪碧图，下面提供两个单独的返回顶部图片方便朋友们使用：

![go-top-icon][] ![go-top-icon2][]![go-top-light-green][] ![go-top-green][] ![go-top-yellow][]

有了html和样式，我们还需要用js控制返回顶部按钮，在页面滚动时渐隐渐现返回顶部按钮。

这样就可以了。

注意在载入页面后需要向下拖动一点滚动条才可以看到返回顶部的效果图。

[go-top-icon]: https://imgconvert.csdnimg.cn/aHR0cDovL291dG9mbWVtb3J5LmNuL3VnYy91cGxvYWQvMDAvMDcvMjAxMjEyMDIvQWN0aW9ucy1hcnJvdy11cC10b3AtaWNvbi5wbmc?x-oss-process=image/format,png
[go-top-icon2]: https://imgconvert.csdnimg.cn/aHR0cDovL291dG9mbWVtb3J5LmNuL3VnYy91cGxvYWQvMDAvMDcvMjAxMjEyMDIvR25vbWUtR28tVG9wLTQ4LnBuZw?x-oss-process=image/format,png
[go-top-light-green]: https://imgconvert.csdnimg.cn/aHR0cDovL291dG9mbWVtb3J5LmNuL3VnYy91cGxvYWQvMDAvMDcvMjAxMjEyMDIvZ28tdG9wLWxpZ2h0LWdyZWVuLnBuZw?x-oss-process=image/format,png
[go-top-green]: https://imgconvert.csdnimg.cn/aHR0cDovL291dG9mbWVtb3J5LmNuL3VnYy91cGxvYWQvMDAvMDcvMjAxMjEyMDIvZ28tdG9wLWdyZWVuLnBuZw?x-oss-process=image/format,png
[go-top-yellow]: https://imgconvert.csdnimg.cn/aHR0cDovL291dG9mbWVtb3J5LmNuL3VnYy91cGxvYWQvMDAvMDcvMjAxMjEyMDIvZ28tdG9wLWljb25lLTc5NDgtOTYucG5n?x-oss-process=image/format,png