JQuery实现一键返回顶部

最新推荐文章于 2023-03-20 18:30:19 发布

Archer_An

最新推荐文章于 2023-03-20 18:30:19 发布

阅读量1.8k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/haandxc/article/details/50897368

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

本文主要实现一键返回顶部的功能，具体返回顶部的图片及样式在js文件中定义。

下面是yestop.js中的代码：

/*!
* YesTop(jQuery GoToTop)
* version: 1.1.2
* Copyright (c) 2015 HoverTree
* http://hovertree.com
* http://hovertree.com/texiao/yestop/
*/
(function ($) {
    $.fn.yestop = function (options) {

        var settings = $.extend({
            yes_position: 'fixed',
            yes_width: '48px',
            yes_height: '48px',
            yes_image: 'http://hovertree.com/texiao/yestop/inc/yestop.png',
            yes_hoverImage: '',
            yes_length: '268',
            yes_time: 500,
            yes_bottom: '50px',
            yes_right: "50px",
            yes_top: "",
            yes_left: "",
            yes_title: "Go Top",
            yes_opacity: "0.8",
            yes_hoverOpacity:"1",
            yes_radius: "0%",
            yes_html: "",
            yes_hoverHtml: "",
            yes_fontSize:"12px",
            yes_lineHeight: "48px",
            yes_backColor: "transparent"
        }, options);

        settings.yes_image = "url(" + settings.yes_image + ")";


        var h_yesObj;
        if($(this).length<1)//
        {
            if ($("#yesTopHovertree").length < 1) {
                $("<div id='yesTopHovertree'></div>").appendTo("body");
            }
            h_yesObj = $("#yesTopHovertree");
        }
        else {
            h_yesObj = $(this);
        }

        h_yesObj.css({
            "width": settings.yes_width, "height": settings.yes_height
            , "cursor": "pointer", "border-radius": settings.yes_radius
            , "position": settings.yes_position 
            , "opacity": settings.yes_opacity, "background-image": settings.yes_image
            , "text-align": "center", "line-height": settings.yes_lineHeight
            ,"background-color":settings.yes_backColor,"font-size":settings.yes_fontSize
        })

        if (settings.yes_html != "")
        { h_yesObj.html(settings.yes_html) }

        if (settings.yes_hoverHtml != "")
        {
            h_yesObj.hover(function () { h_yesObj.html(settings.yes_hoverHtml) }, function () { h_yesObj.html(settings.yes_html) })
        }

        if (settings.yes_position == "fixed") {
            if (settings.yes_top == "") {
                h_yesObj.css({ "bottom": settings.yes_bottom })
            }
            else { h_yesObj.css({ "top": settings.yes_top }) }
            if(settings.yes_left=="")
            { h_yesObj.css({ "right": settings.yes_right }) }
            else { h_yesObj.css({ "left": settings.yes_left }) }
        }

        h_yesObj.hover(
          function () {
              h_yesObj.css({ "opacity": settings.yes_hoverOpacity })
          },
          function () {
              h_yesObj.css({ "opacity": settings.yes_opacity })
          }
        )
        

        if (settings.yes_hoverImage != "")
        {
            settings.yes_hoverImage = "url(" + settings.yes_hoverImage + ")"
            h_yesObj.hover(
                function () { h_yesObj.css({ "background-image": settings.yes_hoverImage });}
                , function () { h_yesObj.css({ "background-image": settings.yes_image }) });
        }

        h_yesObj.attr("title", settings.yes_title);

        if (settings.yes_length > 0)
            h_yesObj.hide();
        else { h_yesObj.show();}

        $(window).scroll(function () {
            if ($(window).scrollTop() > settings.yes_length) {
                h_yesObj.fadeIn(100);
            }
            else {
                h_yesObj.fadeOut(100);
            }
        });

        h_yesObj.on("click", function () {$('html,body').animate({ scrollTop: '0px' }, settings.yes_time); return false;  })

    }
}(jQuery));

其中html页面如下所示，jquery-1.11.3.min.js文件自己下载。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
    <title>返回顶部</title><meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="yestop.js"></script>
    <style>
        body {
            margin: 0px;font-family:Arial
        }a{color:blue}
    </style>
</head>
<body>
    <div style="text-align:center;width:100%;margin:0px auto;">
        <h1>返回顶部</h1>
    </div>
    <div style="width:100%;text-align:center;height:200px">by &copy; Archer_An</div>    
    <div style="height: 200px; visibility: visible; background-color: Olive"></div>
	<div style="height:200px;background-color:burlywood"></div>
	<div style="height:200px;background-color:darkorchid"></div>
    <div style="height: 200px; visibility: visible; background-color:gray"></div>
    <div style="height:200px;background-color:blue"></div>
    <div style="height:200px;background-color:red"></div>
    <div style="height:200px;background-color:yellow"></div>
    <div style="height:200px;background-color:yellowgreen"></div>
    <script type="text/javascript">
        $(document).ready(function () { $.fn.yestop(); })
    </script>
</body>
</html>

Archer_An

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现一键返回顶部

本文主要实现一键返回顶部的功能，具体返回顶部的图片及样式在js文件中定义。下面是yestop.js中的代码：/*!* YesTop(jQuery GoToTop)* version: 1.1.2* Copyright (c) 2015 HoverTree* http://hovertree.com* http://hovertree.com/texiao/yestop/*/(
复制链接

扫一扫