2015-12-14 13 views
5

特定のポイントを超えると、htmlページをスクロールアップする機能を無効にする必要があります。私はまた、そのページのトップに戻るための仕組みが必要です。スクロールアップを無効にした後のページ

私は以下のコードでこれを達成しようとしましたが、ページが応答性が高いため(ウィンドウのサイズによってポイントの位置が変わる可能性があるため)、私にとってまだ効果がありません。

$(function() { 
    var scrollPoint = 200; 
    var scrolledPast = false; 
    $(window).scroll(function() { 
     $(window).scrollTop() > scrollPoint ? scrolledPast = true : ''; 
     $(window).scrollTop() < scrollPoint && scrolledPast == true ?  
     $(window).scrollTop(scrollPoint) : ''; 
    }).scroll(); 
}); 

これはJavascript/JQueryで実行できますか?

+0

アップデート:私はどうもありがとうございました、これは最初に動作し、ページ – vlk

答えて

5

var minScroll = 200; 
 
var scrollPoint = 0; 
 

 
function setPage(id) { 
 
    scrollPoint = $("#" + id).offset().top; 
 
    document.location.href = "#" + id; 
 
} 
 

 
$(function() { 
 
    $(window).on("scroll", function() { 
 
    var current = $(window).scrollTop(); 
 
    if (scrollPoint >= minScroll) { 
 
     if (current < scrollPoint) $(window).scrollTop(scrollPoint); 
 
     else { 
 
     //scrollPoint = $(window).scrollTop(); 
 
     } 
 
    } else { 
 
     //scrollPoint = $(window).scrollTop(); 
 
    } 
 
    }); 
 

 
    $("#return").on("click", function() { 
 
    scrollPoint = 0; 
 
    $(window).scrollTop(0); 
 
    }); 
 

 
    wave("page1"); 
 
    wave("page2"); 
 
    wave("page3"); 
 
}); 
 

 
function wave(id) { 
 
    var maxWave = 30; 
 
    var minWave = 2; 
 

 
    for (var i = 0; i < 50; i++) { 
 
    var waveSize = Math.floor(Math.random() * (maxWave - minWave) + minWave); 
 
    var j = 0; 
 

 
    for (j; j < waveSize; j++) { 
 
     for (var k = 0; k < j; k++) { 
 
     $("#" + id).append("#"); 
 
     } 
 
     console.log(j + " vs " + waveSize); 
 
     if (j == waveSize - 1) $("#" + id).append(")"); 
 
     else $("#" + id).append("\\"); 
 

 
     $("#" + id).append("<br />"); 
 
    } 
 

 
    for (j = j - 2; j >= 0; j--) { 
 
     for (var k = 0; k < j; k++) { 
 
     $("#" + id).append("#"); 
 
     } 
 
     $("#" + id).append("/<br />"); 
 
    } 
 
    } 
 
}
#return { 
 
    position: fixed; 
 
    top: 55px; 
 
    right: 5px; 
 
} 
 
#pg1 { 
 
    position: fixed; 
 
    top: 75px; 
 
    right: 5px; 
 
} 
 
#pg2 { 
 
    position: fixed; 
 
    top: 95px; 
 
    right: 5px; 
 
} 
 
#pg3 { 
 
    position: fixed; 
 
    top: 115px; 
 
    right: 5px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="return">Return To Top</button> 
 
<button id="pg1" onclick="setPage('page1');">Page 1</button> 
 
<button id="pg2" onclick="setPage('page2');">Page 2</button> 
 
<button id="pg3" onclick="setPage('page3');">Page 3</button> 
 

 
<div id="page1">Page 1 
 
    <br /> 
 
</div> 
 
<div id="page2">Page 2 
 
    <br /> 
 
</div> 
 
<div id="page3">Page 3 
 
    <br /> 
 
</div>

+0

こんにちはの上部から画面の後に私たちを「スクロールアップdisabele」開始ポイントを必要とするが、それ私は開始点に戻ることができません、私は開始点までスクロールできるようにしたい。ありがとうございます – vlk

+1

どの時点でスクロールできるようにしたいですか?あなたが言ったロジックは、スクロールアップを無効にしたいということなので...しかしスクロールアップできる必要があります。 – teynon

+0

@vlkトップに戻る方法を示すボタンを追加しました。 – teynon

関連する問題