原生js實現返回頂部特效

阿新 • • 發佈：2018-10-24

程序 mar document timer margin con lse hid 監聽

index.html

<!DOCTYPE html>
<html>
   <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <link herf="index.css">       
   </head>
  <body>
        <span id="icon"></span>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p> 

        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p> 

        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p> 

        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <p>我是程序員，平凡有一點理想，渴望讓世界不一樣！</p>
        <script src="scroll.js"></script>
                <script src="index.js"></script>
       </body>
</html>

index.css

            *{
                padding: 0;
                margin: 0;
                border: none;
                list-style: none;
            }
            body{
                background-color: #ddd;
            }
            p{
                text-align: center;
                font-size: 25px;
                margin-bottom: 30px;
            }
            #icon{
                width: 43px;
                height: 43px;
                background: url("./images/to_top.png") no-repeat;
                background-size: 100% 100%;
                position: fixed;
                bottom: 15px;
                right: 20px;
                display: none;

            }

index.js

             window.onload=function(){
                 //定義變量
                 let scroll_top=0;
                 let begin=0,end=0,timer=null;
                 //監聽窗口滾動事件
                 window.onscroll=function(){
                     scroll_top=scroll().top;
                     //顯示和隱藏
                     scroll_top>0?show($("icon")):hidden($("icon"));
                 }
                 //監聽圖標的點擊事件
                 $("icon").onclick=function(){
                     //清除定時器
                     clearInterval(timer);
                     //開啟定時器
                     timer=setInterval(function(){
                        begin+=(end-begin)*0.2;
                        window.scrollTo(0,begin);
                        //判斷運動結束條件，清除定時器
                        if(Math.round(begin)===end){
                            clearInterval(timer);
                        }
                        
                     },30);
                 }
             }
             function $(id){
                 return typeof id==="string"?document.getElementById(id):null;
             }
             function show(obj){
                 return obj.style.display="block";
             }
             function hidden(obj){
                 return obj.style.display="none";
             }

scroll.js

function scroll(){
    if(pageYOffset!==null){
        return {
            top:window.pageYOffset,
            left:window.pageXOffset
        }
    }else if(document.compatMode===CSS1Compat){
        return {
            top:document.documentElement.scrollTop,
            left:document.documentElement.scrollLeft
        }
    }
    return {
        top:document.body.scrollTop,
        left:document.body.scrollLeft
    }
}

原生js實現返回頂部特效

程序 mar document timer margin con lse hid 監聽 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&

JS實現返回頂部最佳的效果

今天看了很多頁面中返回頂部效果，發現有2種方式是比較容易理解記憶的。一、利用scrollTop=0達到返回頂部的效果 //當點選toTop元素時，跳轉到頂上 toTop.onclick = function () { if (document.documentElement)

原生js，實現“返回頂部”效果

display nts top document tag 兼容 name () else html： <span>^</span> css body{ height: 3000px;

原生JS實現各種經典網頁特效——Banner圖滾動、選項卡切換、廣告彈窗等

在製作網頁過程中，我們可能會遇到各種常用的經典網頁特效，比如Banner圖片滾動、選項卡迴圈播放、右下角廣告彈窗、評論提交展示、選項動態增刪、剪刀石頭布小遊戲等等等。。。是不是感覺都見到過這些場景、那些這些場景都是如何實現的呢？今天，小瑞老師就一口氣把所有經典網頁特效效果送給大家！！！

原生js實現使滾動條緩慢回到頂部的效果

timer=setInterval(function(){ var scrollTop=document.documentElement.scrollTop||document.

原生js實現拖動滑塊驗證

cnblogs tcc mvt wms 網站 hnu 按鈕 itl rip 拖動滑塊驗證是現在的網站隨處可見的，各式各樣的拖動法都有。下面實現的是某寶的拖動滑塊驗證： <!DOCTYPE html> <html lang="en"> <he

原生js實現outerWidth()方法，用到getComputedStyle

turn left func ltview wid nts dst fault 方法 function getTrueStyle(obj,attr){ if(obj.currentStyle){ //ie return obj.currentStyle[at

原生js實現form表單序列化

defined json cnblogs 一個 break value 元素 default [0 大家都知道在jquery中有相應的表單序列化的方法： 1.serialize()方法　　格式：var data = $("form").serialize(); 　　功能：

h5原生js實現輪播圖

list sla head log startx creat ase hit eve 預覽地址：http://s.xnimg.cn/a90529/wap/wechatLive/test/slide.html <!DOCTYPE html> <html l

原生js實現數據單向綁定

web 名稱 target 接收參數 .org desc ctype html fin Object.defineProperty()方法直接在對象上定義一個新屬性，或修改對象上的現有屬性，並返回該對象。 Object.defineProperty(obj, prop, d

原生js實現清除子元素節點

spa class document cnblogs ech child mov log tor var table = document.body.querySelector(‘.mui-table-view‘);

原生JS實現tab切換--web前端開發

soft 楊冪 microsoft hidden isp 老婆 tex oct rip tab切換非常常見，應用非常廣泛，比較實用，一般來說是一個網站必不可少的一個效果。例如：https://123.sogou.com/中的一個tab部分： 1、案例源代碼 <!DO

原生js實現輪播

tex tom enter utf-8 定義 radi absolut tco query <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

原生js實現的瀑布流布局

n) top 開始 rrh lang java ansi return 一個 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

原生JS實現增加刪除class

doctype [0 cls hasclass sna pla class ctype reg 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css

JQuery&原生js ——實現剪刀石頭布小遊戲

原生 type space 封裝 jquer 石頭 jquery java .com jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是&ldqu

原生JS實現放大鏡效果

use 瀏覽器賦值 uri 字符串 () solid adding clas 效果： 1、鼠標放上去會有半透明遮罩、右邊會有大圖片局部圖 2、鼠標移動時右邊的大圖片也會局部移動放大鏡的關鍵原理：鼠標在小圖片上移動時，通過捕捉鼠標在小圖片上的位置，定位大圖片的相

用原生js實現ajax、jsonp

原生js 斜杠 lang settime 發送數據 tro upper 類型之前一、原生js實現ajax $.ajax({ url: ‘‘, type: ‘post‘, data: {name: ‘zhaobao‘, age: 20}, dataTy

原生JS實現ajax省市區三聯

cal tex -type con arr length view thead () <!-- /** * @fileName: linkageUI.class.php * @author: wk * @DateTime: 2017/10/29 17:25 * @De

原生JS實現圖片放大鏡插件

spa ont 範圍 display 離開寬度部分 gin es2017 前言　　我們大家經常逛各種電商類的網站，商品的細節就需要用到放大鏡，這個大家一定不陌生，今天我們就做一個圖片放大鏡的插件，來看看圖片是如何被放大的……

原生js實現返回頂部特效

相關推薦