国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

HTML學習筆記之二(回到頂部 與 回到底部)_html/css_WEB-ITnose

php中文網(wǎng)
發(fā)布: 2016-06-24 11:43:20
原創(chuàng)
1703人瀏覽過

回到頂部 回到底部

回到頂部的倆種方式

?一、使用js

?? ???

 $('html, body').animate({ scrollTop: 0 }, 'fast');//帶動畫        $('html,body').scrollTop(0); //不帶動畫
登錄后復制

?? ??
  $(window).scroll(function () {            //You've scrolled this much:               $('p').text("You've scrolled " + $(window).scrollTop() + " pixels");        });
登錄后復制



二、使用 a 標簽的name屬性

?? ??? ???

立即學習前端免費學習筆記(深入)”;

 <a name="top">top</a>            <a href="#top">Click here go back to the top.</a>
登錄后復制



三、獲取高度


?1. 整個文檔高度

??????

 var body = document.body,            html = document.documentElement;        var height = Math.max( body.scrollHeight, body.offsetHeight,                       html.clientHeight, html.scrollHeight, html.offsetHeight );       // 或者        var height = $(document).height();
登錄后復制



?2. 當前屏幕高度

???????

var wheight = $(window).height();
登錄后復制


HTML代碼

<!-- 側邊欄 按鈕-->        <div id="back-top">		  <button class="styled-button">TOP</button>		</div>		<div id="back-end">		  <button class="styled-button">TOP</button>		</div>		<!--底部 內容-->        <div id="footer"></div>
登錄后復制


js代碼

jQuery(document).ready(function($){    /**     * 回到頂部     */    $('#back-top').click(function(){        $('html,body').stop();        $('html,body').animate({            scrollTop:'0px'        },1000);    });        /**     * 回到底部     */    $('#back-end').click(function(){        $('html,body').stop();        $('html,body').animate({            scrollTop:$('#footer').offset().top        },1000);    });});
登錄后復制

//回到頂部的 顯示 隱藏代碼		   $(document).ready(function(){			  // hide #back-top first			  $("#back-top").hide();			  // fade in #back-top			  $(function () {			    $(window).scroll(function () {			      if ($(this).scrollTop() > 100) {			        $('#back-top').fadeIn();			      } else {			        $('#back-top').fadeOut();			      }			    });			    // scroll body to 0px on click			    $('#back-top').click(function () {			      $('body,html').animate({			        scrollTop: 0			      }, 'fast');			      return false;			    });			  });			});
登錄后復制



css代碼

#back-top{position: fixed; bottom:20px; right: 2%; z-index: 100; }
登錄后復制



HTML速學教程(入門課程)
HTML速學教程(入門課程)

HTML怎么學習?HTML怎么入門?HTML在哪學?HTML怎么學才快?不用擔心,這里為大家提供了HTML速學教程(入門課程),有需要的小伙伴保存下載就能學習啦!

下載
來源:php中文網(wǎng)
本文內容由網(wǎng)友自發(fā)貢獻,版權歸原作者所有,本站不承擔相應法律責任。如您發(fā)現(xiàn)有涉嫌抄襲侵權的內容,請聯(lián)系admin@php.cn
最新問題
開源免費商場系統(tǒng)廣告
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓,幫助PHP學習者快速成長!
關注服務號 技術交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://m.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號