jQuery SmoothScroll and Select-Option

Question

I'm creating a select menu to make my site responsive. I'm using smoothscroll (https://github.com/kswedberg/jquery-smooth-scroll) to handle the scrolling of my regular a href #hash link menu items, but could use some help getting it to work for select & option.

Here is my select menu;

<select>   
    <option value=""> </option>
    <option value="#home" class="smoothscroll">Home</option>
    <option value="#what-we-do" class="smoothscroll">What we do</option>
    <option value="#case-studies" class="smoothscroll">Case Studies</option>
    <option value="#testimonials" class="smoothscroll">Testimonials</option>
    <option value="#contact" class="smoothscroll">Contact</option>
</select>

And here is my jQuery code;

$('nav select').change(function() {
    $.smoothScroll({offset: -70, speed: 2000});
});

As it is right now, if you scroll down on my page and use the select menu and choose any option, it smooth-scrolls back up to the top of the page -- not to the correct #hash tag. If you select an option when you're at the top of the page, nothing happens.

Your help would be much appreciated. Thank you.

Answer 1

It looks to me like you are not actually telling smoothscroll where you want to go. According to the docs you can give the function a target simply by using scrollTarget like this (where $(this).val() is the current value of the select element):

$('nav select').change(function() {
    $.smoothScroll({
        offset: -70,
        speed: 2000,
        scrollTarget: $(this).val()
    });
});