当前位置: 首页 > 工具软件 > ScrollUp > 使用案例 >

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

华心思
2023-12-01

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>


 类似资料: