JQuery实现一键返回顶部

来源：互联网发布：扫矿老僧软件使用视频编辑：程序博客网时间：2024/06/03 18:49

本文主要实现一键返回顶部的功能，具体返回顶部的图片及样式在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>

1 0