1. 程式人生 > >頁面滾動後出現按鈕 和 點選按鈕返回頂端

頁面滾動後出現按鈕 和 點選按鈕返回頂端

首先建立一個div作為置頂按鈕,css中定義class為 .totop:

<div class="totop" align="center"id="totop" onclick="topFunction()">
		<a class="fa fa-chevron-up" style="color: white;" onclick="topFunction()"></a>
</div>

.totop{

    #code(樣式已省略)

}

JS程式碼:

$(document).ready(function(){

	//頁面滾動後出現返回頂部的按鈕
	window.onscroll = function() {scrollFunction()};
	function scrollFunction() {console.log(121);
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 100) {
        document.getElementById("totop").style.display = "block";
    } else {
        document.getElementById("totop").style.display = "none";
    }
}
	// 點選按鈕,返回頂部
	$('.totop').click(function(){
		$("html,body").animate({scrollTop:0}, 500);
	});
});

相關推薦

頁面滾動出現按鈕 按鈕返回頂端

首先建立一個div作為置頂按鈕,css中定義class為 .totop:<div class="totop" align="center"id="totop" onclick="topFuncti

新增Activity、頁面傳值跳轉按鈕觸發事件『Android系列九』

        這篇文章主要是將怎麼新新增頁面和怎麼在兩個頁面之間跳轉,以及怎麼傳值過去。         已經知道了頁面配置檔案在layout資料夾下,新建layout/report.xml: <RelativeLayout xmlns:android="htt

手機中的頁面數字不顯示為電話號碼 按鈕出現陰影蘋果中限制縮放

   <meta name="format-detection" content="telephone=no">    <style type="text/css">*{ -webkit-tap-highlight-color: rgba(0,0

WPF 獲取ListView中列新增LinkButton按鈕按鈕的當前行的ID值

前臺      把ID值繫結到Tag屬性中    (Tag="{Binding Path=id}")         <DockPanel  HorizontalAlignment="Left" Name="dpBody" VerticalAlignment="Top

書本例項3 單按鈕按鈕

看了題目之後我先按自己的思路實現了,我是在點選“顯示”按鍵的時候再一次性檢查控制元件的屬性,來確定ShowMessage的內容。 書本給出的程式樣例是在每次使用者點選控制元件的時候就更新一次存有message內容的變數,我想這樣應該比較浪費資源吧,不過程式很小,估計沒影響。 姓名、性別、學習成績

移動端開發H5頁面按鈕出現閃爍或黑色背景的解決辦法

-webkit-tap-highlight-color:transparent; *{-webkit-tap-highlight-color:transparent; } H5頁面在IOS端測試的時候

Android studio按鈕隱藏頁面恢復頁面

那如果想要再點選按鈕顯示佈局怎麼辦呢? 設定一個全域性變數tag,初始化=0,onclick2是按鈕的點選事件,呼叫函式,這個函式就是用來控制佈局隱藏還是顯示的,再點選後設置其隱藏還是顯示,接著修改tag的值,這樣下一次點選就會執行另一個按鈕的動作了 public

移動端開發按鈕出現閃爍的結局方法

最近用vue.js開發移動端控制元件時,發現當點選按鈕出發v-if時,總會出現按鈕瞬間的閃動和黑色的背景,體驗很差,最後發現解決問題的方法十分簡單,就是給點選按鈕新增一個css屬性: -webkit

如何按鈕彈出新視窗,輸入資料返回並重新整理頁面?(C#程式碼)

namespace ShowModalTest{ /// <summary> /// WebForm1 的摘要說明。 /// </summary> public class WebForm1 : System.Web.UI.Page {  protected System.Web.UI

C# 實現按鈕進行頁面的放大縮小

using System.Windows.Forms; private System.Windows.Forms.WebBrowser webBrowser1; float times = 1.0F; private void button1_Click(object se

ScrollView滾動顯示按鈕置頂的解決方案

隨著APP資料量的增大,電商APP的興起,大家會經常使用到ScrollView,但是有時候我們滑下資料的時候會出現一個問題,那就當我們資料量太多時,我們無法快速的定位回ScrollView的頂部,以至於操作相同的資料導致我們興致缺缺,所以誕生了一系列的輔助操作,今天我就帶大

活用clonetrigger函式,按鈕原有事件不觸發,之後再觸發原有事件

活用clone和trigger函式,點選按鈕原有事件不觸發,之後再觸發原有事件 需求: 網站開發完畢了,然後產品說要在原來的’確認按鈕’點選後加一個’彈窗’提醒使用者一些注意事項,在使用者點選彈窗裡面的’同意按鈕’後再執行原來’確認按鈕’ 裡面繫結的事件。需求看起來很簡單,但是有一個要

js、jq標籤裡面設定按鈕與不可狀態

<button id="bt1" type="button">button</button> 1、js中設定按鈕可點選與不可點選,預設是可點選的 (1)設定按鈕不可點選 document.getElementById("bt1").disabled=ture;

element-ui 解析新增編輯。裡面按鈕上的click事件為什麼要那樣寫?

  1.首先新增頁面我們把定義的新增要填的表單繫結的model值全部又寫了一遍,和上面data裡面定義的格式是一樣的,為什麼呢?是多此一舉嗎? 當然不是。因為每次點選彈窗新增的表單都必須是置空的。而我們從新寫了一遍定義時的資料相當於把他置空了。   2

jquery實現按鈕返回頁面頂部效果

有的時候我們需要實現點選按鈕回到頁面頂部的效果,下面就是我的實現 首先HTML程式碼如下 <div class="QZ-up" style="display: none;"></div> 當滾動條高度大於120px的時候出現按鈕如下

iOS開發之根據按鈕確定的section row

  分組的tableview cell上面有按鈕,根據按鈕確定點選的是哪一組的哪一行。對於初學者來說不好判斷,那麼下面就來跟大家分享一下如何實現吧。   cell 方法裡面新增   [cell.pingjiaBtn addTarget:self action:@selector(didPingJiaBut

按鈕新增刪除塊

    點選按鈕新增塊        <form action="" id="repairmain" method="post"> <!-- 頁面內容--> <div id="form"> <div c

音樂網站開發:實現按鈕切換頁面背景圖的功能

        最近這一星期在做一個簡單小型的音樂播放器網站,目前各種功能基本都已經實現,包括切換上一曲下一曲,播放與暫停,隨機播放單曲迴圈順序播放模式切換,一首播放完畢自動按模式切換至下一曲,載入單句歌詞及所有歌詞等功能。另外就是本篇部落格要介紹的功能了,點

js 按鈕出現其他地方隱藏

//點選所有地方,#bky會隱藏 $(document).click(function(){     $("#bky").hide(); }); //點選 #zcgl_bky 會顯示 #bky $("#zcgl_bky").click(function(event)

ViewPager+RadioGroup+RadioButton實現滑動切換頁面按鈕切換頁面

一:效果圖: 二:程式碼: 首先  根據我們有幾個頁面就設定幾個Fragment, 主函式: public class MainActivity extends AppCompatActivity { private ViewPager viewpager;