演示

下载地址

点击下载

HTML部分

    <script src="jquery-3.5.1.min.js"></script>
        <div id="updown">
            <div class="sidebar_wo" id="leimu">
            <img src="leimuA.png" alt="雷姆" onmouseover="this.src='leimuB.png'" onmouseout="this.src='leimuA.png'" id="audioBtn"></div>
            <div class="sidebar_wo" id="lamu"><img src="lamuA.png" alt="雷姆" onmouseover="this.src='/getTop-rem/lamuB.png'" onmouseout="this.src='/getTop-rem/lamuA.png'" id="audioBtn"></div>
<script type="text/javascript" src="top.js"></script>></div>
<script type="text/javascript" src="/getTop-rem/top.js"></script>
<div id="landlord" style="left: 109px; bottom: 68px; display: none;">

CSS部分

    .sidebar_wo{position:fixed;line-height:0;bottom:0;z-index:1000}
#leimu{left:0;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-transform:translate(-7px,7px);-ms-transform:translate(-7px,7px);transform:translate(-7px,7px)}
#lamu{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-transform:translate(7px,7px);-ms-transform:translate(7px,7px);transform:translate(7px,7px);right:0}
#leimu:hover{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
#lamu:hover{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
#updown img{cursor:pointer}
@media only screen and (max-width:1024px){.sidebar_wo{display:none}
}

js部分

<script src="jquery-3.5.1.min.js"></script>

gettop.js

$(function(){$("#updown > #lamu img").eq(0).click(function(){$("html,body").animate({scrollTop:0},800);return false});$("#updown > #leimu img").eq(0).click(function(){$("html,body").animate({scrollTop:$(document).height()},800);return false})});

转自：猫狗鼠鱼的储物间