Question

我有一个水平导航的网站。

这是代码：

<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，它工作得很好，但如果分辨率非常宽，它就不会工作..

Answer 1

类似的东西：

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

});

如果你试图在几个元素之间水平滚动，那么应该这样做。

这是另一个参考：Link

Answer 2

如果我理解得很好，你需要水平滚动，每个＆＃34;屏幕＆＃34;有一个整页的宽度。如果是这种情况，您不需要使用javascript，但只能使用css，除非您需要在＆＃34;屏幕之间平滑滚动＆＃34;。

如果不使用js，您只需要将每个box的宽度设为100％，并将内容放在孩子中。

Check this fiddle获得想法

Answer 3

基于DavidFariña的回答，此句柄也出现在页面上

//use this if you only need it for the current page and remove it after leaving the page
const exampleStorage = window.localStorage;
exampleStorage.setItem('currentUser', 'Manuel');

//use this if you need to keep it even after leaving the page
localStorage.setItem('glob_currentUser', 'Max');

//and finally this if you need to keep it only for the session
sessionStorage.setItem("session", "Morning")

Answer 4

如果我理解正确，你有一个固定宽度区域，你想一次显示一个？喜欢这个？

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

显然你需要链接这些菜单项，但你明白了

水平滚动到锚点

4 个答案: