jquery.scrollup插件实现返回顶部的效果

最新推荐文章于 2021-10-13 15:26:40 发布

tgw2000

最新推荐文章于 2021-10-13 15:26:40 发布

阅读量1k

点赞数

分类专栏： javascript 建站技术

本文链接：https://blog.csdn.net/tgw2000/article/details/45966635

版权

建站技术同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

1、页面引入文件jquery.js与jquery.scrollup.js

2、页面中定义返回顶部按钮的css样式，如

#scrollUp {
    background: rgba(0, 0, 0, 0) url("scrolltop.png") no-repeat scroll 0 0;
    bottom: 20px;
    height: 38px;
    right: 130px;
    width: 38px;
}

3、页面中加入js代码

<script type="text/javascript">
                $.scrollUp({
                scrollName: 'scrollUp', // Element ID
                topDistance: '260', // Distance from top before showing element (px)
                topSpeed: 300, // Speed back to top (ms)
                animation: 'fade', // Fade, slide, none
                animationInSpeed: 200, // Animation in speed (ms)
                animationOutSpeed: 200, // Animation out speed (ms)
                scrollText: '', // Text for element
                activeOverlay: false  // Set CSS color to display scrollUp active point, e.g '#00FFFF'
            });
</script>