添加到百度首页
添加收藏 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前端视?#21040;?#31243;


大家都在看

最新更新

web前端视?#21040;?#31243;
切尔西女球迷索菲萝丝
一分赛车全天计划 福彩3d八码组六最大遗漏 棋牌二人麻将 赌博押二八杠有规律吗 重庆时时彩2期4码计划 加拿大28如何杀组合 大乐透胆拖投注怎么算中奖 重庆时时彩开奖APP 966棋牌在线 优发国际-亚洲顶级线上娱乐 欢乐麻将二人雀神怎么玩 北京pk10直播 广东快乐十分破解软件 极速时时 抢庄牛牛赢现金 pc蛋蛋在线下载