javascript/jquery实现div始终在页面底部

代码如下

 代码如下 复制代码

<html>
<body>
<div id="divDetail" style="overFlow-y:scroll; width:250px;height: 200px;">
<table style="border:1px solid; ">
<tr><td>id</td><td>name</td><td>age</td><td>
关键的部分部分在这里：div.scrollTop = div.scrollHeight; 滚动看看我是不是在底部哦。
</td></tr>
</table>
</div>
</body>
<script type="text/javascript" defer>
var div = document.getElementById('divDetail');

div.scrollTop = div.scrollHeight;
//alert(div.scrollTop);
</script>
</html>

另一种方法

利用DIV的scrollIntoView方法，将最底端滚动到可视位置 [list=1]

 代码如下 复制代码
<script language="javascript1.2" type="text/javascript">
function onGetMessage(context)
{
msg.innerHTML+=context;
msg_end.scrollIntoView();
}
</script>
<div style="width:500px;overflow:auto">
<div id="msg" style="overflow:hidden;width:480px;"></div>
<div id="msg_end" style="height:0px; overflow:hidden"></div>
</div>

最后一种是兼容大量的浏览的用法，可以随用户滚动而滚动哦。

 代码如下 复制代码

<title>固定在页面底部的滚动公告</title>
    <style type="text/css">
    html,body,div ul{margin:0;padding:0;border:0; font-size:12px}
    #gg{position:fixed;bottom:0;background:#000;width:100%;height:23px;z-index:9999;opacity:.60;filter:alpha(opacity=60);_bottom:auto;_width:100%;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
 #gg a {color:#FFF}
    </style>

<script type="text/javascript">
(function($){
 $.fn.extend({
  Scroll:function(opt,callback){
  if(!opt) var opt={};
  var _this=this.eq(0).find("ul:first");
  var lineH=_this.find("li:first").height(),
  line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),
  speed=opt.speed?parseInt(opt.speed,10):7000,//卷动速度，数值越大，速度越慢（毫秒）
  timer=opt.timer?parseInt(opt.timer,10):7000;//滚动的时间间隔（毫秒）
   if(line==0) line=1;
   var upHeight=0-line*lineH;
   scrollUp=function(){
    _this.animate({
    marginTop:upHeight
   },speed,function(){
    for(i=1;i<=line;i++){
     _this.find("li:first").appendTo(_this);
    }
    _this.css({marginTop:0});
   });
  }
  _this.hover(function(){
   clearInterval(timerID);
  },function(){
   timerID=setInterval("scrollUp()",timer);
  }).mouseout();
 }
 })
})(jQuery);
$(document).ready(function(){
 $(".bulletin").Scroll({line:1,speed:1000,timer:5000});//修改此数字调整滚动时间
});
</script>
    </head>
    <body>
<div style="height:3000px"></div>
<div id="gg"><a href="/">固定在页面底部的滚动公告</a></div>
    </body>
    </html>
时间： 2024-09-27 22:26:45

javascript/jquery实现div始终在页面底部的相关文章

jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)_jquery

本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: <!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&qu

浅析jquery如何判断滚动条滚到页面底部并执行事件_jquery

本文章向码农介绍jquery如何判断滚动条滚到页面底部并执行事件.首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. 首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight:是指元素内容的高度.

页面copyright部分始终居于页面底部

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{margin:0;padding:0;} html,body{height:100%;color:#fff;} .main{

始终在页面底部的层js实现代码_布局与层

aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 注意:代码不符合标准,大家可以根据需要自行修改.

jquery实现页面底部div固定

先说遇到的问题,一个没有满一屏的页面,需要将底部的信息栏固定在下面,并且随着浏览器窗口大小的变化而保持位置始终在底部. 风哥的解决方案, 用jq,直接灭. 一句话,不割, 代码如下:  代码如下 复制代码 $(window).resize(function(){              var h_doc = $(document).height();              var h_foo = h_doc-25;              $('#footer').offset({to

jQuery实现div浮动层跟随页面滚动效果

 这篇文章主要介绍了jQuery实现div浮动层跟随页面滚动效果,需要的朋友可以参考下  代码如下: <!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"

jQuery实现div浮动层跟随页面滚动效果_javascript技巧

复制代码 代码如下: <!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=&qu

jquery实现弹出div,始终显示在屏幕正中间的简单实例

 本篇文章主要是对jquery实现弹出div,始终显示在屏幕正中间的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 以下代码块就能始终让弹出div位于屏幕的正中心,希望对大家有所帮助!  代码如下:     //让指定的DIV始终显示在屏幕正中间        function setDivCenter(divName){            var top = ($(window).height() - $(divName).height())/2;           

jquery页面重叠问题-jquery填充DIV页面重叠问题

问题描述 jquery填充DIV页面重叠问题 我目前的页面有一个树,点击树的节点就会出现相应的表单.可是目前页面却出现了页面重叠的问题,效果如下: 部分代码如下: $('#tt').tree({ url : 'jsp/querymaintain', onClick : function(node) { // 在用户点击的时候提示 s(node.id); } }); function s(id) { $.post("jsp/querybyeid",{'method':'querybyei