jQuery返回顶部插件-jquery.scrollUp.min.js

发布时间:2016/3/17 标签: jQuery插件 分类:jQuery

在网页设计中,每年都有很多流行的设计方案和颜色搭配,新技术也不断的更跌,但总有那么一些小元素是必不少的,如浏览到页面底部快递返回善的功能。今天为大家推荐jquery.scrollUp.min.js就能快递实现返回功能,简单易用。

官网:https://markgoodyear.com/labs/scrollup/

gitHub地址:https://github.com/markgoodyear/scrollup

在线示例

下载示例代码

如何使用jquery.scrollUp.min.js

完整示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="generator" content="58IMG.COM" />
    <title>jQuery返回顶部插件-jquery.scrollUp.min.js</title>
    <style type="text/css">
        .content { height: 1500px; }
        #scrollUp { background-image: url("img/top.png"); bottom: 20px; right: 20px; width: 38px; height: 38px; }
    </style>
</head>
<body>
    <div class="content"></div>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/jquery.scrollUp.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //scrollup
            $.scrollUp({
                scrollName: 'scrollUp', // Element ID
                topDistance: '300', // 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>
</body>
</html>

如有问题可以直接发表留言或加前端QQ群:233808496

注:目前各种插件太多,很多同学无法分清好或坏的,本站只推荐优秀插件!

现代浏览器推荐

做为一名前端人员,您有责任且有义务让用户升级浏览器拥有完美的浏览体验,与国际接轨,同时让更多的前端人员不再苦逼! 本站将不再支持IE9以下的版本!

猜你喜欢

QQ交流群

学习使人进步,交流让人提高!

Bootstrap/HTML5/CSS3交流群:233808496

Orchard/Nopcommerce/Umbraco交流群:187502451

Bootstrap/HTML5/CSS3交流二群:385480040