Comment faire défiler le point d'ancrage dans un site Web réactif?

Je crée un site Web de portefeuille contenant une simple liste déroulante et une grande image GIF dans un div (10659px × 6850px). Comme je l'ai voulu, lorsque vous faites des sélections dans la liste, vous poussez sur certains points d'ancrage sur la page à l'aide d'un javascript simple qui est en cours d'activation sur Changement.

Le 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> 

Le 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; } } 

Mon problème: je souhaite rendre le site réactif afin que l'image ait le même ratio sur chaque écran. La largeur de l'image par exemple devient alors 550% au lieu de 10659px. Mais alors, les points d'ancrage définis commencent à bouger et à ne pas correspondre, bien sûr. Existe-t-il un moyen de résoudre ce problème? Peut-être utiliser un javascript ou jQuery qui utilise des valeurs relatives plutôt que des pixels fixes? Ou pour découper l'image et faire en sorte que diverses ID se réfèrent? Des conseils ou des réponses seront très appréciés!

Je vois que vous avez utilisé et recommandé mon plugin. J'aimerais souligner que le lien que vous avez fourni conduit à une ancienne version du plugin. J'ai quitté Google Code depuis longtemps pour Github. Vous (et d'autres) devrait obtenir la dernière version de la page de diffusion:

https://github.com/flesler/jquery.scrollTo/releases

À votre santé

Ok, un ami m'a aidé, voici le jQuery qui fait ce que je veux. Je n'utilise plus une image d'arrière-plan, mais plusieurs div, et le jQuery se défile vers ses ID.

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

Principe:

 <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> 

Lien vers le téléchargement scroll to jQuery: http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.3.1-min.js

Merci pour les conseils!