स्क्रॉल ऊपर अक्षम पृष्ठ

Question

पर प्वाइंट के बाद मैं एक बार मैं एक निश्चित बिंदु से प्राप्त एक एचटीएमएल पृष्ठ पर ऊपर स्क्रॉल करने की क्षमता को निष्क्रिय करने की जरूरत है। मुझे पृष्ठ के शीर्ष पर लौटने के लिए एक तंत्र की भी आवश्यकता है।

मैं निम्नलिखित कोड के साथ यह पूरा करने की कोशिश की है, लेकिन यह मेरे लिए अभी तक काम नहीं किया है, क्योंकि वह पृष्ठ उत्तरदायी है (इस प्रकार बिंदु के स्थान को खिड़की के आकार के साथ बदल सकते हैं)।

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

क्या यह जावास्क्रिप्ट/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>