移动滚动条

好的，我有一个div来自其他用户的消息。我想，当他们键入的东西，如果DIV是四溢，滚动进入到div的底部，我已经试过这样：移动滚动条

$('div').animate({scrollTop: $($('#final')).offset().top}, 1000);

但我脑水肿此错误：

enviar.js： 10遗漏的类型错误：无法读取未定义

测试页面的属性“顶”：

<body background="fondos/fondo-inicio.jpg""> 
<ul> 
<li><a class="active" href="inicio.php">Inicio</a></li> 
<li><a href="paginaad.php">Administracion</a></li> 
<li><a href="comentarios.php">Reporta</a></li> 
<ul style="float:right;list-style-type:none;"> 
<li><a href="#about">Sobre mi</a></li> 
<li><a href="salir.php">Logout</a></li> 
</ul> 
</ul> 
<div id="contenedor"><span id="final"></span></div> 
<input type="text" id="mensaje" name="mensaje" /> 
<button id="boton">Enviar</button> 
</body>

来源

2016-05-29 Alex Braga

尝试像这样$（'div'）。animate（{scrollTop：$（'＃final'）。offset（）。top}，1000）; –

不，抱歉不工作是相同的错误 –

张贴您的完整代码的小提琴。请在http://jsfiddle.net –

您只需要在附加内容时更新滚动位置。

此代码的工作，以及必不可少的部件是updatePos（），我在

无论您是使用PHP或以其他方式，这是该位，将赚取差价添加功能。

您可以使用原来的代码，并追加updatePos（），但这是为了举例的目的（当然我没有访问您的DB）

$(function() { 
 
    $('#boton').on('click', function() { 
 
    var content = $('#mensaje').val(); 
 
    $('#contenedor').append(content + '<br>'); 
 
    $('#final').animate({ 
 
     scrollTop: $('#contenedor').offset().top 
 
    }, 1000); 
 
    $('#mensaje').val(''); 
 
    updatePos(); 
 

 
    }); 
 

 

 
}); 
 

 
$(function() { 
 
    $('#mensaje').keydown(function(event) { 
 
    if (event.which == 13 || event.keycode == 13) { 
 

 
     var content = $('#mensaje').val(); 
 
     $('#contenedor').append(content + '<br>'); 
 
     $('#mensaje').val(''); 
 
     updatePos(); 
 

 

 
    } 
 
    }); 
 

 

 
    function updatePos() { 
 
    var element = document.getElementById("contenedor"); 
 
    element.scrollTop = element.scrollHeight; 
 

 
    } 
 

 

 

 
});

#contenedor { 
 
    width: 40%; 
 
    height: 200px; 
 
    border-style: solid!important; 
 
    border-width: 3px!important; 
 
    overflow-y: scroll; 
 
    position: relative; 
 
    margin-bottom: 10px; 
 
    top: 20%; 
 
    left: 30%; 
 
    background-color: white; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
    border-color: #07B3D1; 
 
} 
 

 
#mensaje { 
 
    width: 20%; 
 
    height: 6%; 
 
    position: relative; 
 
    display: inline-block; 
 
    left: 30.2%; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
    border-color: #07B3D1; 
 
} 
 

 
#boton { 
 
    width: 5%; 
 
    min-width: 75px; 
 
    height: auto; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
    border-color: #07B3D1; 
 
    position: relative; 
 
    display: inline-block; 
 
    left: 30%; 
 
    transition: all 0.5s; 
 
    font-size: 100%; 
 
} 
 

 
#boton:hover { 
 
    box-shadow: 0 10px 10px 0 #FFFFFF; 
 
} 
 

 
#final { 
 
    width: 100%; 
 
    height: 200px!important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<body background="fondos/fondo-inicio.jpg"> 
 
    <ul> 
 

 
    <div id="contenedor"> <span id="final"></span></div> 
 
    <input type="text" id="mensaje" name="mensaje"> 
 

 
    <button id="boton">Enviar</button> 
 

 

 

 
    </ul> 
 

 
</body>

来源

2016-05-29 22:27:09

谢谢！我已经将这个函数应用到了我的代码中，并且工作得很好，Tahnk你！ –

您提供以下代码：

$('div').animate({scrollTop: $($('#final')).offset().top}, 1000);

看起来好像您已经将#final元素封装在两个jQuery包装器中。删除重复的$()，它应该按预期工作。它是未定义的，因为它无法从另一个jQuery对象解析jQuery对象。以下是更正的代码：

$('div').animate({ 
    scrollTop: $('#final').offset().top 
}, 1000);

来源

2016-05-29 20:49:57

上阅读评论。我已经告诉过你这样做。还是一样的错误 –

我的歉意，瑞秋。我跳了那把枪，谢谢你的抬头。 :) –

[链接]（https://jsfiddle.net/m0ktL4hy/）我不知道为什么结果看起来像这样，但在我的网页看起来非常好... –

回答

相关问题