Tắt cuộn lên sau điểm trên trang

Question

Tôi cần vô hiệu hóa khả năng cuộn lên trên trang html khi tôi vượt quá một điểm nhất định. Tôi cũng cần một cơ chế để trở về đầu trang nói trên.

Tôi đã cố gắng thực hiện điều này bằng mã sau, nhưng nó chưa hoạt động đối với tôi vì trang này đáp ứng (do đó vị trí của điểm có thể thay đổi theo kích thước của cửa sổ).

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

Điều này có thể được thực hiện với Javascript/JQuery không?

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>