How to scroll to anchor point in responsive websit

Question

I'm making a portfolio website that contains a simple dropdownlist and one big GIF image in a div (10659px × 6850px). As I intended, when you make selections from the list, you jump to certain anchor points on the page using a simple javascript that's being activated onChange.

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

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

My problem: I want to make the website responsive so that the image has the same ratio on every screen. The width of the image for example will then become 550% instead of 10659px. But then the set anchor points start to move and mismatch, of course. Is there a way to solve this? Maybe to use a javascript or jQuery that uses relative values instead of fixed pixels? Or to cut up the image and make various ID's to refer to? Any tips or answers will be very much appreciated!

Answer 1

I see you used and recommend my plugin. I'd like to point out that link you provided leads to an old version of the plugin. I moved out of Google Code a long time ago to Github. You (and others) should get the latest version from the releases page:

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

Cheers

Answer 2

Ok a friend helped me out, here's the jQuery that does what I want. I don't use one background image anymore but multiple div's, and the jQuery scrolls to their ID's.

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

Principle:

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

Link to the scrollto jQuery download: http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.3.1-min.js

Thanks for the advices!