滚动到div ID时添加动画

时间:2013-12-31 10:57:24

标签: animation select hash scroll onchange

我想在现有的脚本中添加一些动画。这是一个简单的“转到div”脚本,当有人更改下拉列表中的选项时,该脚本会转到特定的Div,但它的功能是“onchange”而不是链接点击。现在我想添加动画,当它转到Div时会有一些平滑的滚动,因为现在它只是抓住了它,客户可能会迷失方向,想想发生了什么。

这是我在HEAD里面的脚本

<script type="text/javascript">
    function mylinkfunction(e) {
           window.location.hash="#reservation_summary";
            }       
</script>

这是触发器mylinkfunction();在下拉列表中,以及其他“onchange”触发器。

<select class="inputbox" onchange="roomsCalc(this.value);mylinkfunction();removeHash();" style="width:150px" id="roomselect'.$rowr->id.'" name="jh-select-price['.$rowr->id.']">

我找到了一些解决方案,但是所有内容都是针对onclick而制作的,当有人点击某个链接时,尝试实现其中一些,但它不适用于“onChange”触发器。

我非常感谢你的帮助。

1 个答案:

答案 0 :(得分:0)

jQuery添加到您的项目中(如果您还没有!)并使用jQuery's .animate() functionscrollTop来达到预期的效果。

所以select看起来就像你已经拥有的那样:

<select onchange="mylinkfunction();">
  <option value="one">Uno</option>
  <option value="two">Dos</option>
  <option value="three">Tres</option>
</select>

...而mylinkfunction()将如下所示:

function mylinkfunction(e) {
    $('html, body').animate({
        scrollTop: $("#reservation_summary").offset().top
    }, 2000);
}