添加到百度首頁
添加收藏 RSS 網站地圖 舊版網站
  • 全部
  • 網頁特效
  • 建站教程
  • 設計分享
當前位置:首頁 > 建站教程 > JavaScript教程 >

JS點擊按鈕到頁面最底部/返回頁面頂部代碼

時間:2014-12-12      來源:科e互聯     

在做一個制作一個手機頁面時,由于底部菜單有一個按鈕點擊可以展開更多菜單功能,展開菜單同時頁面要保持在最底部,而不是拖動滾動條才顯示。
 

點擊前:

js教程

點擊后:

js教程

 

返回頂部、到達頁面底部HTML代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS點擊按鈕到頁面最底部/返回頁面頂部代碼</title>
</head>
<body>
<a href="javascript:void(0);" onclick="javascript:document.getElementsByTagName('BODY')[0].scrollTop=document.getElementsByTagName('BODY')[0].scrollHeight;">到頁面底部</a>
<div style="height:3000px;"></div>
<a href="javascript:void(0);" onclick="javascript:document.getElementsByTagName('BODY')[0].scrollTop=0;">返回頁面頂部</a>
</body>
</html>
點擊按鈕標簽向上展開代碼:
$(".class").click(function(){
$(".class2").slideDown(300);
$("html,body").animate({"scrollTop":$(document).scrollTop()+100},350);   //注:100參數一定要大于.class2元素的高度
});
相關文章
web前端視頻教程


大家都在看

最新更新

web前端視頻教程
彩票中奖指