[英]Horizontal scroll to anchor
我有一个水平浏览的网站。
这是代码:
<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>
每个框的宽度为300px。 但是,当我单击时,如果它在分辨率区域中可见,则不会滚动到该框。 我想做的是,如果我点击例如<a href="#box-3">
它会把我带到div #box-3
但是它将是第一个在左侧,而其他div必须是隐。 它仅在分辨率很小时才隐藏其他div,它可以完美工作,但是,如果分辨率很宽,它将无法工作。
就像是:
$(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();
});
});
如果您尝试在几个元素之间水平滚动,则应这样做。
这是另一个参考: 链接
如果我理解得很好,则需要水平滚动,每个“屏幕”都具有整页宽度。 如果是这种情况,则不需要javascript,而只能使用css来实现,除非需要在“屏幕”之间进行平滑滚动。
在不使用js的情况下,您只需要使每个box
的宽度为100%,然后将其内容包含在子级中即可。
检查这个小提琴以获得想法
根据大卫·法里尼亚(DavidFariñ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();
});
});
如果我理解正确,那么您有一个固定宽度的区域要一次显示一个吗? 像这样?
<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示例: http : //jsfiddle.net/8B3hL/
显然,您需要链接这些菜单项,但是您知道了
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.