如何滚动到响应式网站的锚点? [英] How to scroll to anchor point in responsive website?

问题描述

我正在制作一个投资组合网站，其中包含一个简单的下拉列表和一个div中的大GIF图像(10659px×6850px).正如我的预期，当您从列表中进行选择时，您会使用正在onChange上激活的简单javascript跳转到页面上的某些定位点.

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.

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:

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

我的问题:我想让网站具有响应性，以便每个屏幕上的图像具有相同的比例.例如，图像的宽度将变为550％，而不是10659px.但是，当然，设置的锚点开始移动并且不匹配.有办法解决吗?也许使用使用相对值而不是固定像素的javascript或jQuery?还是要切割图像并制作各种ID以供参考?任何提示或答案将不胜感激！

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!

推荐答案

好吧，一个朋友帮了我忙，这是可以满足我需要的jQuery.我不再使用一个背景图像，而是多个div，并且jQuery滚动到其ID.

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

原理:

<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

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

感谢您的建议！

这篇关于如何滚动到响应式网站的锚点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！