我想在现有的脚本中添加一些动画。这是一个简单的“转到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”触发器。
我非常感谢你的帮助。
答案 0 :(得分:0)
将jQuery添加到您的项目中(如果您还没有!)并使用jQuery's .animate()
function和scrollTop
来达到预期的效果。
所以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);
}