右下角小火箭，返回頂部-onscroll，scrollTo

阿新 • • 發佈：2019-02-07

右下角小火箭，返回頂部—onscroll，scrollTo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .goTop{
            position: fixed;
            right 
: 100px;
            bottom: 100px;
            display: none;
        }

    </style>    
</head>
<body>
    <div class="goTop" id="rockToTop">
        <img src="images/top.jpg" alt="">
    </div>
    <div class="content">
        開始了！<br>
        <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>
        <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>
    </div>
    <script src="my.js" type="text/javascript"></script>
    <script>    
        function show(id){
            id.style.display="block";
        }
        function hide(id){
            id.style.display="none";
        }
        var rockToTop = document.getElementById('rockToTop');
        window.onscroll = function(){
            scroll().top > 0 ? show(rockToTop) : hide(rockToTop);  // 如果大於0 就顯示 否則隱藏
            leader = scroll().top;
        }
        var leader = 0 , target = 0, timer = null;
        rockToTop.onclick = function() {
                target = 0;  //  點選完畢之後 奔向0 去的  不寫也可以
                timer = setInterval(function() {
                    leader = leader + (target - leader ) / 10;
                    window.scrollTo(0,leader);  // 去往頁面中的某個位置
                     console.log(leader+"  "+target);
                    if(leader == target) {
                        clearInterval(timer);
                    }
                },20);
            }

    </script>
</body>
</html>

my.js

function show(obj) { obj.style.display = "block";}
function hide(obj) { obj.style.display = "none";}
function scroll() {
    if(window.pageYOffset != null)  //  ie9+ 和其他瀏覽器
    {
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }
    else if(document.compatMode == "CSS1Compat")  // 宣告的了 DTD
    // 檢測是不是怪異模式的瀏覽器 -- 就是沒有 宣告<!DOCTYPE html>
    {
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    }
    return { //  剩下的肯定是怪異模式的
        left: document.body.scrollLeft,
        top: document.body.scrollTop
    }

右下角小火箭，返回頂部-onscroll，scrollTo

右下角小火箭，返回頂部—onscroll，scrollTo <!DOCTYPE html> <html lang="en"> <head> &l

DIV始終固定在網頁右下角位置的CSS實現方法，返回頂部功能

在網上找到了數種實現方式，感覺第三種效果很好例項一 DIV始終固定在網頁右下角位置的CSS實現方法，一個實用的提示效果，基於CSS-Div，開啟網頁後始終顯示在右下角，拖動滾動條仍然固定在右下角不會變，通過這個CSS程式碼斷你會更深一層理解CSS的層定位方法，對以後編寫CS

在頁面中有overflow-y:auto屬性的div,當出現滾動條，點擊返回頂部按鈕，內容回這個div最頂部

1.8 auto class blog click scrip title over nbt <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

實現瀏覽器-右下角-小廣告功能（您有新的訊息）

Win10應用右下角小盾牌怎麼解決

每次裝win10後發現有的應用右下角有小盾牌，對於有強迫症的人說，非常的難受？經過多次的實驗後發現，終於可以解決這個問題。 cmd 輸入secpol.msc 本地策略——安全選項開啟安全選項後，下滑找到使用者賬戶控制，根據下圖禁用相應的服務。

IE瀏覽器右下角小廣告怎麼去除

1 開啟瀏覽器，進入瀏覽器設定視窗，選擇工具--internet選項 2 進入internet選項視窗之後，選擇“安全視窗”，並點選“自定義級別”。 3 找到活動指令碼，並選擇“禁用”。點選確定，關閉視窗。OK,重新整理頁面，小廣告消失。

有道雲筆記去除右下角小廣告

版本 Windows桌面版 V6.0.0 路徑 D:\Youdao\YoudaoNote\theme\default\skin.xml 刪除約2985行 <PanelAd Bounds="0,0,0,161" DockStyle="botto

php後臺查詢出資料，返回json資料，前臺接收並輸出

stu表： index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://www.jq22.com/jquery/jquery

順序棧的概念，初始化，回收，入棧，出棧，返回棧頂，遍歷

/*棧，是限定在僅在隊尾進行插入或刪除操作的線性表，因此對於棧來說，表尾端有其特殊含義，稱為棧頂相應地，表頭端稱為棧底。不含元素的空表稱為空棧。 (限定只能在一端（棧頂）進行操作（入棧和出棧）的線性表，稱之為棧) S=(a1,a2,a3---,an)---a1成為棧底，an

Python Flask，Json，返回Json資料，jsonify

demo.py（返回Json資料）： # coding:utf-8 from flask import Flask, jsonify import json app = Flask(__name__) # 第一種方式：手動返回Json字串 @app.route("/i

ASP.NET WEB API微信支付通知介面，返回xml資料，微信伺服器不識別問題

最近開發微信小程式中用到了微信支付功能，介面開發用的ASP.NET WEB API；在支付成功後，介面接受到微信伺服器的支付通知結果，處理完資料，介面返回給微信服務資料時出現了問題。微信伺服器識別不到返回的資料，導致重複通知。最終解決程式碼如下： protect

img標籤src引用網路圖片，頁面不顯示，返回403錯誤，網路圖片地址在瀏覽器能載入，放html卻不能顯示

在html頁面加入<meta name="referrer" content="no-referrer">標籤，就可以解決頁面載入網路圖片的問題，原因大概是網路安全的問題，別人的頁面做了安全防護的問題。<head> <meta chars

struts2 表單提交後，返回原頁面，儲存表單radio 等標籤的值

在表單提交後，或者驗證失敗後，返回原有頁面時，如何將使用者原來在表單中填寫資料儲存下來呢？經過研究後，發現有兩種簡便的方法可以解決： 1. 在不使用struts2標籤的情況下，我們用普通的表單元素。（以radio為例）方法：我們將struts2 的控制標籤巢狀

jquery ajax請求成功，返回了資料，但是不進success回撥函式的問題

來自http://www.myexception.cn/ajax/413061.html --------------------------拷貝內容 start -------------------

ajax請求失敗，返回錯誤頁面，造成逆轉失敗

com.fasterxml.jackson.core.JsonParseException: Unexpected character ('<' (code 60)): expected a valid value (number, String, arr

JQUERY AJAX請求成功，返回了資料，但是不進SUCCESS的問題

在前天專案中碰到這個問題，原因是後臺java返回的json 不規範導致，我是先看先看下面的部落格找到的思路，但我不是用的他說的方法，我是把dataType:"json"註釋掉，把aynsc改為false，也就是非同步改為同步，解決的問題。 (adsbygoogle = window

jquery ajax請求成功，返回了資料，但是不進success的問題【轉】

這幾天一直被 ajax請求成功，返回了資料，但是不進success的問題困擾著，怎麼弄就是解決不了，總以為是：$(document).ready(function(){});沒起作用，一直找頁面載入的方法來試，整了好幾天沒整出來....今天比較幸運，在網上找到了一篇關於這方面問題的文章，按

Spring 通過XML配置檔案以及通過註解形式來AOP 來實現前置，環繞，異常通知，返回後通知，後通知

本節主要內容：一、Spring 通過XML配置檔案形式來AOP 來實現前置，環繞，異常通知 1. Spring AOP 前置通知 XML配置使用案例 2. Spring AOP 環繞通知 XML配置使用案例 3. Spring AOP

給出一個m*n的矩陣，求左上角到右下角的距離的最小值。

問題描述這是一個商湯科技筆試題的變形，大致是給出一個m*n的矩陣，矩陣裡的數代表其他相鄰格到此格的距離，且只能向右和向下走，求左上角到右下角的距離的最小值。例： 0 1 9 3 5 2 6 8 7 這個例子的最短距離是0-1-5-2-7，結果是15。這個真

winform最小化後隱藏到右下角，單擊或雙擊後恢復

notifyIcon控制元件。下面的程式碼 private void MainForm_Resize(object sender, EventArgs e) { if (this.WindowState == FormWindowSt

右下角小火箭，返回頂部-onscroll，scrollTo

相關推薦