2

我有一个我正在做的项目，我正在努力达到一定的效果，我想知道这里是否有人可以帮助我。

这是我现在的位置：

http://jsfiddle.net/RT9g5/1/

这是我的 HTML：

<body>

    <div class="section blue" id="section1">
        <h2>Section 1</h2>
        <div class="scroll">
            <a class="btn btn-primary" href="#section1">Section 1</a>
            <a class="btn btn-primary" href="#section2">Section 2</a>
            <a class="btn btn-primary" href="#section3">Section 3</a>
        </div>
    </div>

    <div class="section green" id="section2">
        <h2>Section 2</h2>
        <div class="scroll">
            <a class="btn btn-primary" href="#section1">Section 1</a>
            <a class="btn btn-primary" href="#section2">Section 2</a>
            <a class="btn btn-primary" href="#section3">Section 3</a>
        </div>
    </div>

    <div class="section red" id="section3">
        <h2>Section 3</h2>
        <div class="scroll">
            <a class="btn btn-primary" href="#section1">Section 1</a>
            <a class="btn btn-primary" href="#section2">Section 2</a>
            <a class="btn btn-primary" href="#section3">Section 3</a>
        </div>
    </div>

</body>

这是我的CSS：

* {
    margin:0;
    padding:0;
}

body,
html {
    height: 100%;
    width: 100%;
}

.section {
    text-align: center;
    padding-top: 50px;
    height:100%;
    width:100%;
}

.blue {
    background-color: #697bab;
}

.green {
    background-color: #6dab69;
}

.red {
    background-color: #ab6969;
}

这是我的Javascript：

$(function() {
    $('.scroll a').bind('click',function(event){
        var $anchor = $(this);

        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500,'easeInOutExpo');
        event.preventDefault();
    });
});

现在我喜欢这样，我可以单击链接将我带到各个部分，但是我想做的是当我在鼠标上使用滚轮时，它会将我带到下一部分/上一部分. 这样效果会非常好和流畅。

这是我希望实现的最后一种鼠标滚轮滚动效果的示例：

http://flatguitars.com/

请注意，当您使用鼠标上的滚轮时，它会将您完全带到下一部分。

对此的任何帮助将不胜感激，谢谢！

解决方案

http://jsfiddle.net/MQqYN/16/

它使用 jquery.mousewheel.js - 感谢 DOM 的提示！

4

0 回答 0