javascript - 如何滚动到响应式网站中的 anchor ？

Question

我正在制作一个投资组合网站，其中包含一个简单的下拉列表和一个 div (10659px × 6850px) 中的大 GIF 图像。如我所愿，当您从列表中进行选择时，您会使用在更改时激活的简单 javascript 跳转到页面上的特定 anchor 。

html:

<div id="background">
<img src="img/background.gif" width="10659" /></div>

<select id="dropdownlist" onChange="jumpScroll(this.value);">
<option  alt="selected works" value="0">Selected works:</option>
<option  alt="work 1" value="1">Work 1</option>
<option  alt="work 2" value="2">Work 2</option>
<option  alt="work 3" value="3">Work 3</option>
</select>

JavaScript:

function jumpScroll(inobj) {


switch (inobj) {

case "1":
    window.scroll(1938,2740);
    break;

case "2":
    window.scroll(7753,5483);
    break;

case "3":
    window.scroll(0,1369);
    break;

    default:
    break;
}
}

我的问题:我想使网站具有响应性，以便图像在每个屏幕上具有相同的比例。例如，图像的宽度将变为 550% 而不是 10659px。但是，当然，设置的 anchor 开始移动和不匹配。有办法解决这个问题吗？也许使用使用相对值而不是固定像素的 javascript 或 jQuery？还是把图片剪下来做各种ID来引用？任何提示或答案将不胜感激!

Answer 1

好吧，一位 friend 帮助了我，这是执行我想要的操作的 jQuery。我不再使用一个背景图像，而是使用多个 div，jQuery 滚动到它们的 ID。

$(document).ready(function(){
$("#dropdownlist").on('change',function(){
    var project = "#" + $(this).val();
    $.scrollTo($(project), 1000);
});
});

原理:

<div id="workone">Work 1 content</div>
<div id="worktwo">Work 2 content</div>
<div id="workthree">Work 3 content</div>

<select id="dropdownlist">
<option value="workone">Work 1</option>
<option value="worktwo">Work 2</option>
<option value="workthree">Work 3</option>
</select>

scrollto jQuery 下载链接:http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.3.1-min.js

多谢指教!