0

コードを単純化するために、'$(input[data-code]").each' 関数を使用してコードを単純化しようとしています。コードは、ユーザーがアンカー リンクをクリックしたときに処理され、アニメーション化されます。その場所まで、次のようになります。

$('a.welcome').click(function(){
    $('html, body').animate({scrollTop:0}, 2000, function() {
        parallaxScroll(); 
    });
    return false;
});

$('a.step1').click(function(){
    $('html, body').animate({scrollTop: $('#step1').offset().top - 70}, 2000, function() {
        parallaxScroll(); 
    });
    return false;
});

$('a.step2').click(function(){
    $('html, body').animate({scrollTop: $('#step2').offset().top - 70}, 2000, function() {
        parallaxScroll(); 
    });
    return false;
});

$('a.step3').click(function(){
    $('html, body').animate({
        scrollTop: $('#step3').offset().top - 70
    }, 2000, function() {
        parallaxScroll(); 
    });
    return false;
});

そして、それを単純化するためにこれまでに思いついたのは次のようになります。

$("input[data-code]").each(function() {
    $(this).click(function(){
        $('html, body').animate({
            scrollTop: $($(this).data("code")).offset().top - 70
        }, 2000, function() {
            parallaxScroll(); 
        });
        return false;
    });
});

しかし、それは機能していないようです:(

私の理論は、$(this).click(function(){実際にはスタイル内の要素を適切に呼び出していないということです$(a.welcome).click(function(){

リンクの実際の HTML は次のようになります。

<nav id="primary">
    <ul>
        <li>
            <h1>Welcome</h1>
            <a class="welcome" href="#welcome" data-code="0">View</a>
        </li>
        <li>
            <h1>Step 1: Setup</h1>
            <a class="step1" href="#step1" data-code="#step1">Step 1</a>
        </li>
        <li>
            <h1>Step 2: Data Management</h1>
            <a class="step2" href="#step2" data-code="#step2">Step 2</a>
        </li>
        <li>
            <h1>Step 3: Configure Cameras</h1>
            <a class="step3" href="#step3" data-code="#step3">View</a>
        </li>
    </ul>
</nav>

何か案は？

4

4 に答える 4

0

これをオンクリック機能で使用できます

$('#primary a').on('click', function () {
    var offSet = $($(this).data('code')).offset().top - 70;
    if ($(this).is('.welcome')) {
        offSet = 0;
    }
    $('html, body').animate({
        scrollTop: offSet
    }, 2000,

    function () {
        parallaxScroll();
    });
    return false;
});
于 2013-10-16T13:54:58.747 に答える