回到頂部 回到底部
回到頂部的倆種方式
?? ???
$('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="top">top</a> <a href="#top">Click here go back to the top.</a>
??????
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();
???????
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速學教程(入門課程),有需要的小伙伴保存下載就能學習啦!
Copyright 2014-2025 http://m.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號