从选项锚定在Chrome中不起作用
从选项锚定在Chrome中不起作用
提问于 2020-05-13 00:30:12
这段代码可以在Firefox中运行，但不能在Chrome中运行。请帮帮我。点击选项必须发送到相应的DIV。
HTML：
<html>
<style>
div {
margin-top: 200px;
margin-bottom: 200px;
}
</style>
<body>
<form >
<select name="myselect" id="myselect">
<option value="#year1">anchor-1</option>
<option value="#year2">anchor-2</option>
<option value="#year3">anchor-3</option>
<option value="#year4">anchor-4</option>
<option value="#year5">anchor-5</option>
</select>
</form>
<div id = year1>YEAR 1</div>
<div id = year2>YEAR 2</div>
<div id = year3>YEAR 3</div>
<div id = year4>YEAR 4</div>
<div id = year5>YEAR 5</div>
</body>
</html>JQUERY：
$(function () {
$("#myselect").on("click","option", function (event) {
event.preventDefault();
var id = $(this).attr('value');
var top = $(id).offset().top;
$('html,body').animate({scrollTop: top - 120}, 500);
});
});在jsfiddle上尝试一下：
回答 2
Stack Overflow用户
发布于 2020-05-13 00:47:14
您可能希望方法为"change"，而不是单击选项本身：
$(function () {
$("#myselect").change(function (event) {
event.preventDefault();
var id = $(this).val();
var top = $(id).offset().top;
$('html,body').animate({scrollTop: top - 120}, 500);
});
});这个div id需要双引号：
<div id="year1">YEAR 1</div>
<div id="year2">YEAR 2</div>
<div id="year3">YEAR 3</div>
<div id="year4">YEAR 4</div>
<div id="year5">YEAR 5</div>最后，select的每个子元素的值通常如下所示：
$(this).val();就是这样！
Stack Overflow用户
发布于 2020-05-13 00:58:28
您不需要.on()中的第二个参数-它不是动态加载的，所以它没有什么特殊之处：
$("#myselect").on("change", function(event) {
event.preventDefault();
var id = $(this).val();
var top = $(id).offset().top;
$('html,body').animate({
scrollTop: top - 120 + "px"
}, 500);
});div {
margin-top: 200px;
margin-bottom: 200px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select name="myselect" id="myselect">
<option value="#year1">anchor-1</option>
<option value="#year2">anchor-2</option>
<option value="#year3">anchor-3</option>
<option value="#year4">anchor-4</option>
<option value="#year5">anchor-5</option>
</select>
</form>
<div id=year1>YEAR 1</div>
<div id=year2>YEAR 2</div>
<div id=year3>YEAR 3</div>
<div id=year4>YEAR 4</div>
<div id=year5>YEAR 5</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61756913
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号