jquery - 使用 CSS 和 jQuery 的横向滚动菜单

Question

我想创建一个横向滚动菜单，如 here .我有什么:

HTML:

<div class="scroll">
<p class="scroll_item" id="1">&nbsp;</p>
<p class="scroll_item" id="2">&nbsp;</p>
<p class="scroll_item" id="3">&nbsp;</p>
<p class="scroll_item" id="4">&nbsp;</p>
</div>

<div id="first"> 1 </div>
<div id="second"> 2 </div>
<div id="third"> 3 </div>
<div id="fourth"> 4 </div>

CSS:

    .scroll{
        position:fixed;
        height:48%;
        right:4px;
        top:48%
    }


    .scroll_item{
        margin-bottom:10px;
        width:10px;
        height:10px;
        border: 3px solid #FFF;
    }
    .scroll_item_active{
        width:10px;
        height:10px;
        border:3px solid #FFF;
        background-color: #FFF;
        margin-bottom: 10px;
    }

这应该如何工作: 当您点击 <p>使用 ID 3，它将滚动到 ID 为“third”的 div，并且该框将具有 scroll_item_active类(class)。另一方面，如果你使用浏览器的滚动条，框的类仍然会改变。

我需要你的帮助来编写 jQuery 脚本。 我做了什么:

$('#1').onclick(function(.scrollTo('#first');)
$('#2').onclick(function(.scrollTo('#second');)
$('#3').onclick(function(.scrollTo('#third');)
$('#4').onclick(function(.scrollTo('#fourth');)

Answer 1

此函数导航到具有垂直偏移和平滑度的时间元素的部分

  function scrollTo(selector, time, verticalOffset) {
    time = typeof(time) != 'undefined' ? time : 1000;
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $(selector);
    offset = element.offset();
    offsetTop = offset.top + verticalOffset;
    $('html, body').animate({
        scrollTop: offsetTop
    }, time);
}

将其用作点击功能

$('#1').click(function () {
    scrollToElement('#content');
});

要切换类，请使用 .addClass ( here )

这是一个示例，我相信您可以根据自己的需要进行更改:

$( "p" ).addClass( "myClass yourClass" );
$( "p" ).removeClass( "myClass noClass" )