Deaktivieren Scrollen nach Punkt auf Seite

Question

Ich muss die Möglichkeit, auf einer HTML-Seite nach oben scrollen, sobald ich über einen bestimmten Punkt hinaus. Ich brauche auch einen Mechanismus, um zum Anfang der Seite zurückzukehren.

Ich habe versucht, dies mit dem folgenden Code zu erreichen, aber es hat noch nicht für mich funktioniert, weil die Seite reagiert (daher kann sich die Position des Punktes mit der Fenstergröße ändern).

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

Kann dies mit Javascript/JQuery erreicht werden?

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>