jQuery SmoothScroll和Select-Option

时间:2014-02-26 23:35:54

标签: jquery select option

我正在创建一个选择菜单,以使我的网站响应。我正在使用smoothscroll(https://github.com/kswedberg/jquery-smooth-scroll)来处理我常规的href #hash链接菜单项的滚动,但可以使用一些帮助使其适用于select&选项。

这是我的选择菜单;

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

这是我的jQuery代码;

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

就像现在一样,如果您向下滚动我的页面并使用选择菜单并选择任何选项,它会平滑地向上滚动到页面顶部 - 而不是正确的#hash标记。如果您在页面顶部选择一个选项,则不会发生任何事情。

非常感谢您的帮助。谢谢。

1 个答案:

答案 0 :(得分:0)

在我看来,你实际上并没有告诉smoothscroll你想去哪里。根据{{​​3}},您只需使用scrollTarget就可以为该函数指定一个目标(其中$(this).val()是select元素的当前值):

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