i´ve found a jquery snippet to set the divs id as .hash to url, now there is following PROBLEM:
When i scroll the page down everything works fine, but when i scroll from bottom to top the page is jumping (because the divs with the # were set top without any transition)
What i want to have is the possibility to scroll the page without jumps but still adding the hash?
$(document).bind('scroll',function(e){
$('iframe').each(function(){
if (
$(this).offset().top < window.pageYOffset + 10
&& $(this).offset().top + $(this).height() > window.pageYOffset + 10
) {
window.location.hash = $(this).attr('id');
}
});
});
.hashdiv{
width: 100vw;
height: 40vw;
margin-bottom: 2vh;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="hashone" class="hashdiv"></iframe>
<iframe id="hashtwo" class="hashdiv"></iframe>
<iframe id="hashthree" class="hashdiv"></iframe>
<iframe id="hashfour" class="hashdiv"></iframe>