2

I would like my JQuery scrolling speed to be instantaneous (not smooth/not fast but instant like a classic anchor href="#"). It seems to be about the queue but how could I change my script please ? Thanks for your help.

https://jsfiddle.net/7f1Ldeqr/

<div style="height:3000px">
<a href="#" id="link">Down</a>
<a name="here" style="position:relative; top:2000px;"></a>
</div>

<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js'></script>
<script>
function scrolling(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'fast');}
$("#link").click(function() {
scrolling('here');});
</script>
Ben
  • 21
  • 5
  • 1
    This is just a shot in the dark, but try scrollIntoViewOptions with instant as a parameter value. I got the idea from here. https://stackoverflow.com/questions/15223006/scroll-with-anchor-without-in-url/37279489 Maybe jQuery can't do this alone. – react_or_angluar Dec 05 '20 at 08:47
  • Thank you for your help. It works! I am gonna post the script. – Ben Dec 05 '20 at 10:00

3 Answers3

0

Replace 'fast' by 0. The second parameter is duration in milisecond

<script>
function scrolling(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},0);}
$("#link").click(function() {
scrolling('here');});
</script>
Florent
  • 436
  • 3
  • 8
0

Instead of using fast replace it by something like 0.2 using only 0 doesn't seem to work so a super small close to 0 value would do the trick.

0

Thank you for your answers. Changing that parameter didn't change stuffs for me. I've followed the advice of quantumPuter about scrollIntoView and it worked (finally no JQuery needed. I added the terms "href="#openmenu" onclick="window.location.hash = '#menu1'"" to prove we can combine other stuffs together and makes that scroll still working).

https://jsfiddle.net/7k1s6t80/

<div style="height:3000px">
<a id="forscroll" href="#openmenu" onclick="window.location.hash = '#menu1'">Down</a>
<a id="here" style="position:absolute; top: 2000px;"></a>
</div>

<script>
const target = document.getElementById('here'),
button = document.getElementById('forscroll');
button.addEventListener('click',
function(){target.scrollIntoView({block: 'start',behavior:'instant',inline:'start'});});
</script>

Also, to answer my question, making JQuery scrolling instant (it's about the queue like i thought) =>

$('html,body').animate({scrollTop: e.offset().top},{queue: false,duration: 0})
Ben
  • 21
  • 5