禁用向上滚动页面上

Question

点后，我需要禁用，一旦我得到超过一定点到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来完成吗？

Answer 1

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>