javascript 水平滚动到锚点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15913135/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontal scroll to anchor
提问by Ramon Vasconcelos
I have a site that its horizontally navigated.
我有一个水平导航的网站。
here's the code:
这是代码：
<ul>
<li><a href="#box-1"></a></li>
<li><a href="#box-2"></a></li>
<li><a href="#box-3"></a></li>
<li><a href="#box-4"></a></li>
<li><a href="#box-5"></a></li>
<li><a href="#box-6"></a></li>
<li><a href="#box-7"></a></li>
<li><a href="#box-8"></a></li>
<li><a href="#box-9"></a></li>
<li><a href="#box-10"></a></li>
</ul>
<div id="content">
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
<div id="box-4"></div>
<div id="box-5"></div>
<div id="box-6"></div>
<div id="box-7"></div>
<div id="box-8"></div>
<div id="box-9"></div>
<div id="box-10"></div>
</div>
Each box have 300px width. But when i click, if its visible in the resolution area it wont scroll to the box. What im trying to do is, if i click for example <a href="#box-3">it'll bring me to the div #box-3but it'll be the first on the left and others div must be hidden.
It only hides others div when the resolution is very little, it works perfectly, but if the resolution is very wide it wont work..
每个框有 300px 宽度。但是当我点击时，如果它在分辨率区域可见，它就不会滚动到框。我想要做的是，例如，如果我单击<a href="#box-3">它，它会将我带到 div，#box-3但它将是左侧的第一个，其他 div 必须隐藏。它只在分辨率很小的时候隐藏其他 div，它工作得很好，但如果分辨率很宽，它就行不通了..
回答by David Fari?a
Something like:
就像是：
$(document).ready(function() {
$('ul>li>a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
If youre trying to scroll horizontally between few elements this should do it.
如果您尝试在几个元素之间水平滚动，则应该这样做。
Here is another reference: Link
这是另一个参考：链接
回答by otinanai
If I understood well, you need to scroll horizontally and each "screen" have a full-page width. If this is the case, you don't need javascript but you can make it only with css, unless you need to utilize smooth scrolling between "screens".
如果我理解得很好，您需要水平滚动并且每个“屏幕”都有一个整页宽度。如果是这种情况，则不需要 javascript，但只能使用 css 来实现，除非您需要在“屏幕”之间使用平滑滚动。
Without the use of js you just need to make each box's width 100% and have the content within a child.
在不使用 js 的情况下，您只需要使 eachbox的宽度为 100% 并将内容包含在子项中。
Check this fiddleto get the idea
检查这个小提琴以了解这个想法
回答by Fanky
Based on David Fari?a's answer, this handles also coming to the page
根据 David Fari?a 的回答，这也处理了页面
function horizontal_anchor(){
var hash=decodeURIComponent(location.hash);/*decode special chars like spaces*/
jQuery('html, body').stop().animate({
scrollLeft: jQuery(hash).offset().left
}, 1000);
}
jQuery(document).ready(function(){
//on load
if(location.hash) horizontal_anchor();
//on url change
jQuery(window).on('hashchange',function(event){
horizontal_anchor()
event.preventDefault();
});
});
回答by kristina childs
If I understand this correctly, you have a fixed-width area you want displayed one at a time? Like this?
如果我理解正确的话，您有一个固定宽度的区域想要一次显示一个吗？像这样？
<ul>
<li><a href="#box-1">menu item 1</a></li>
<li><a href="#box-2">menu item 2</a></li>
<li><a href="#box-3">menu item 3</a></li>
<li><a href="#box-4">menu item 4</a></li>
</ul>
<div id="container">
<div id="content">
<div class="box-container" id="box-1">
<div class="box-contents">stuff</div>
</div>
<div class="box-container" id="box-2">
<div class="box-contents">stuff</div>
</div>
<div class="box-container" id="box-3">
<div class="box-contents">stuff</div>
</div>
<div class="box-container" id="box-4">
<div class="box-contents">stuff</div>
</div>
</div>
</div>
#container { width: 100%; overflow: hidden;}
#content { width: 400%; }
.box-container { width: 25%; background-color: red; float: left; display: block;}
.box-contents { height: 300px; width: 300px; text-align: left; background-color: blue; }
jsfiddle example here: http://jsfiddle.net/8B3hL/
这里的 jsfiddle 示例：http: //jsfiddle.net/8B3hL/
obviously you would need to link those menu items, but you get the idea
显然你需要链接这些菜单项，但你明白了
