帶有動態效果得返回頂部

阿新 • • 發佈：2018-12-31

之前做“返回頂部”，一直都是無動態效果的。瞬間就回到了頂部。這次寫一個帶有動態效果的。也就是利用animate方法來實現。下面是具體程式碼。

HTML:

<body>
    <div class="content">
        <p>這是測試文件</p>
        ...
        <p>這是測試文件</p>
    </div>
    <button class="toTopBtn" >回到頂部</button>
</body>

JS:

<script 
 type="text/javascript">
        /*ie9以上(包括)*/
        $(function(){
            $(document).scroll(function(){
                //頁面滾動，按鈕出現
                $(".toTopBtn").show();

                //如果滾動到最上面，按鈕將會消失
                if($(document).scrollTop() == 0) {
                    $(".toTopBtn").hide();
                   }
            });

            $(".toTopBtn" 
).click(function(){
                //此處無動態效果，瞬間回到頂部
                //$(document).scrollTop(0);

                //此處利用animate動畫新增動態效果
                $('html').animate({scrollTop:0},300);
            });
        });
</script>

CSS:

<style type="text/css">
        .toTopBtn {
            display: none 
;
            position: fixed;
            bottom: 30px;
            right: 20px;
            width: 50px;
            height: 50px;
            font-size: 12px;
            text-align: center;
            background-color: #0033FF;
            cursor: pointer;
            font-weight: 600;
            border-radius: 8px;
        }
</style>

帶有動態效果得返回頂部

之前做“返回頂部”，一直都是無動態效果的。瞬間就回到了頂部。這次寫一個帶有動態效果的。也就是利用animate方法來實現。下面是具體程式碼。 HTML: <body> <

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

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

javascript--返回頂部效果

body 滾動 stop cti 時機 height scroll function 根據 window.onload = function(){ var obtn = document.getElementById(‘btn‘); //客戶端頁面可視區高

jQuery 返回頂部效果

span oppo eight col asc set ava scroll animate <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

js返回頂部動畫效果

val top nim time animate ima int www clear // 返回頂部 function goTop(){ // 無動畫效果 document.body.scrollTop = 0; d

js 做返回頂部效果

涉及的知識點： font-awesome字型圖示；使用的cdn。 window.onload 視窗載入完成事件；如果js程式碼寫在body標籤之前，則所有的js都要寫在window.onload的事件中；即等待視窗載入完成之後再執行！ window.onscrol

Android實現CoordinatorLayout、RecyclerView返回頂部效果

一、CoordinatorLayout返回頂部： CoordinatorLayout.Behavior behavior = ((CoordinatorLayout.L

點選返回頂部(滑動效果)

點選返回頂部手機端和PC端很多需求需要做點選返回頂部，例如下圖：當網頁被捲上去的高度大於綠色方框的高度時，顯示點選返回頂部的按鈕，點選之後，返回當頂部。程式碼： 1、html程式碼

“返回頂部程式碼”滑動效果 jQuery超級簡單實用寫法

東西很簡單，還是利用jQuery，直接程式碼： html程式碼，一般放在footer.php裡： <a href="#" id="top"> 返回頂部 </a>

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

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

一個帶微博按鈕的jquery返回頂部效果程式碼

//scrolltotop $(function(){ //首先將#back-to-top隱藏 $("#totop").hide(); //當滾動條的位置處於距頂部100畫素以下時，跳轉連結出現，否則消失 $(function () {

scroll滾動到一定距離觸發事件/返回頂部animate

libs add window fun got light bottom img clas html代碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

返回頂部

images src com alt cnblogs 返回 png 技術分享 .com 返回頂部

JS實例之滾動固定效果，實現頂部菜單固定效果。

rip bsp 實現 con tel body text 滾動 title 1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3

css11動態效果

doc prop col 1.5 sca for left ... ans <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

簡單返回頂部

pan document fault scroll name ack code splay lib <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g

在頁面中有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">

JQ 移動端返回頂部，往下滑動時顯示返回按鈕，往上滑動時隱藏返回按鈕

hid 獲取 scroll var 返回向上區域手勢默認 returnTop:function(){ //預定義返回頂部的html代碼，它的css樣式默認為不顯示 var gotoTop_html = ‘<div class

jquery中返回頂部

部分定位 click 不知道 posit rip bsp 應該一個 <script type="text/javascript">　　 $("#returnTop").on(‘click‘,function(){　　　　 $("body,html").an

利用css實現hover動態效果

idt form 想要 utf-8 屬性 doc lin linear nbsp .font em:hover { font-size: 2em } .font strong:hover { font-weight: normal } .font span:hover {

帶有動態效果得返回頂部

相關推薦