Javascript 使用下拉菜单平滑滚动以定位标记
我正试图让它平滑地滚动,但到目前为止还没有成功。我在网上找到的实用教程是常规的垂直菜单,而不是下拉菜单。有人知道如何让它工作吗?我一直在用这个:Javascript 使用下拉菜单平滑滚动以定位标记,javascript,jquery,html,css,dropdown,Javascript,Jquery,Html,Css,Dropdown,我正试图让它平滑地滚动,但到目前为止还没有成功。我在网上找到的实用教程是常规的垂直菜单,而不是下拉菜单。有人知道如何让它工作吗?我一直在用这个: <select> <option value="#anchor">Anchor</option> </select> <a id="anchor">Anchor</a> 似乎您需要在更改“选择”值时滚动到“定位”,以便 第一:更改选择器以选择并使用更改事件 第二:使用$this
<select>
<option value="#anchor">Anchor</option>
</select>
<a id="anchor">Anchor</a>
似乎您需要在更改“选择”值时滚动到“定位”,以便 第一:更改选择器以选择并使用更改事件 第二:使用$this.val获取所选值 注意:一定要包括jquery
它不起作用。我已经在firefox和chrome上试用过了。@JudiaValenciaKrakowski如果加载时不需要滚动,我会用demo更新我的答案。从最后一段代码开始更改
<script>
$(document).ready(function(){
$('option[value^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 1000, 'swing', function () {
window.location.hash = target;
});
});
});
</script>
<script>
$(document).ready(function(){
$('select').on('change',function (e) {
e.preventDefault(); // no need to use this line
var target = $(this).val();
var $target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top
}, 1000, 'swing', function () { // swing here will work if you include jquery-ui without that it will not make a effect
//window.location.hash = target;
});
}).change();
});
</script>