添加到百度首页
添加收藏 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元素的高度
});
相关文章



大家都在看

最新更新