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

Question

我正在制作一个作品集网站，其中包含一个简单的下拉列表和一个 div 中的大 GIF 图像 (10659px × 6850px)。正如我的意图，当您从列表中进行选择时，您可以使用在 onChange 上激活的简单 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>

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

感谢您的建议!