Side scroll menu with CSS and jQuery

Question

I want to create a side scroll menu like here. What I have:

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;
    }

How this should work: When you click on the <p> with the id 3, it will scroll to the div with the id "third", and the box will have the scroll_item_active class. On the other hand, if you use the browser's scrollbar, the box's class will still be changed.

I need your help to code the jQuery script. What I've done:

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

you are missing the selector before .scrollTo('#fourth');. Like $('body, html').scrollTo() or $(document) — Spokey
– Spokey, Commented Aug 5, 2013 at 12:10

Wayneio · Accepted Answer · 2013-08-05 12:35:15Z

1

This function navigates to a section with a vertical offset and for smoothness, a time element

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

use this as the click function

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

To switch classes use .addClass (here)

here is an example, i'm sure you can change it for your needs:

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

edited Aug 5, 2013 at 12:35

answered Aug 5, 2013 at 12:09

Wayneio

3,5969 gold badges47 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Sergiu Over a year ago

Thank you! How can I switch the classes in the conditions I explained in my post?

Sergiu Over a year ago

jsfiddle.net/jP3yw - I have posted my scripts on JsFiddle, It's not working for now. Can you take a look, please?

Wayneio Over a year ago

your click references scrollToElement, your function is called scrollTo. I just updated and it works

Sergiu Over a year ago

It's working, but only on first 2 divs. I don't get it, the code looks like it's correct. EDIT: It's working on every div now, I didn't seen the post with the link. Sorry! Thank you! Can you help me to switch the classes of the boxex when a div is seen?

Wayneio Over a year ago

I had only updated the first 2 elements with "scrollTo" - the updated link has them all updated. Please look through the code carefully

|

Collectives™ on Stack Overflow

Side scroll menu with CSS and jQuery

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related