0

我想创建一个像这里一样的侧滚动菜单。我有的：

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 的 div 时，它将滚动到 id 为“third”的 div，并且该框将具有scroll_item_active类。另一方面，如果你使用浏览器的滚动条，盒子的类仍然会改变。

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

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

1 回答 1

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（此处）

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

$( "p" ).addClass( "myClass yourClass" );
$( "p" ).removeClass( "myClass noClass" )
于 2013-08-05T12:09:16.723 回答