1. 程式人生 > >a超鏈接之返回頂部的兩種實現方法

a超鏈接之返回頂部的兩種實現方法

html name remove 分享圖片 pla 位置 rem src position

1.通過css實現:

為頁面頂部如body或者自己設置的盒子等加上唯一id屬性

<body id="id">
....
<a href="#id">返回頂部</a>

2.js實現

通過設置標簽滾動位置判斷

document.body.scrollTop=0;
技術分享圖片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cs_top
{ position: fixed; right: 10px; bottom: 10px; height: 60px; width: 60px; background-color: darkgray; opacity: 0.5; } .js_top{ position: fixed; right: 10px; bottom: 120px; height
: 60px; width: 60px; background-color: rebeccapurple; opacity: 0.5; } .hide{ display: none; } #content{ height:960px; width: 100%; } #content:before{ content: ‘top‘; display
: block; } body:after{ content: ‘end‘; display: block; } </style> <script> </script> </head> <body onscroll="Func();"> <div id="content"> <p>fdffa</p> <p>fdffa</p> <p>fdffa</p> <p>fdffa</p> <p>fdffa</p> <p>fdffa</p> <p>fdffa</p> <p>fdffa</p> <p>fdffa</p> </div> <div class="cs_top"> <a href="#content">返回頂部</a> </div> <div class="js_top hide"> <a href="javascript:void(0);" onclick="GoTop();">返回頂部</a> </div> </body> </html> <script src="../02js拾遺/jquery.js"></script> <script> function Func(){ var scrollTop=document.body.scrollTop; var ele=document.getElementsByClassName(js_top)[0]; if (scrollTop>50){ ele.classList.remove(hide); }else{ ele.classList.add(hide); } } function GoTop(){ document.body.scrollTop=0; } </script>
View Code

a超鏈接之返回頂部的兩種實現方法