3

I wonder if it's possible to scroll down after 6 seconds to an anchor?

I found this script where it scrolls down a couple of pixels but it's not completely what I'm looking for.

<script type='text/javascript'>
     setTimeout("window.scrollBy(0,270);",6000);
</script>

Also how can i make it scroll down smoothly? I found this but how do i combine it with the other script?

function scrollToAnchor(aid) {
     var aTag = $("a[name='" + aid + "']");
     $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

$("#link").click(function() {
     scrollToAnchor('id3');
});

I'm not very familiar with JS so I would really appreciate some help :)

the site I'm working is: kip.mascomm.be

UPDATE:

I got the first part to work, thanks to Seth, but can someone please give me a code to make the performance smooth:

var delay = 1000 * 10;
    setTimeout(function() {
        location.hash = "#kippenkramen";
    }, delay);
den_dhaeze
  • 31
  • 1
  • 3

2 Answers2

2

Time Delay example:

var delay=1000 * 6;//1*6 seconds
setTimeout(function(){
  //window.scrollTo(500, 0);//scrolls to specific location
  //location.hash = "#elmentid"; //scrolls to element with given id
},delay);

(How to set time delay in javascript)

Animated Scrolling function:

function scrollTo(element, to, duration) {
  if (duration < 0) return;
  var difference = to - element.scrollTop;
  var perTick = difference / duration * 10;

  setTimeout(function() {
    element.scrollTop = element.scrollTop + perTick;
    if (element.scrollTop == to) return;
    scrollTo(element, to, duration - 10);
  }, 10);
}

(Cross browser JavaScript (not jQuery...) scroll to top animation)

Community
  • 1
  • 1
Seth McClaine
  • 9,142
  • 6
  • 38
  • 64
  • 1
    thanks Seth! The time delay thing with location.hash worked: var delay=1000 * 10; setTimeout(function(){ location.hash = "#kippenkramen"; },delay); I pasted the animated scrolling function under the other script but it didn't work. – den_dhaeze Apr 22 '15 at 08:10
0
  document.querySelectorAll('a[href]').forEach( el => {
    el.onclick = (e) => {
      e.preventDefault()
      setTimeout(() => {
        window.location = el.getAttribute('href')
      }, 6000);
    }
  })
nikober
  • 121
  • 2
  • 3
  • 4
    Welcome to Stackoverflow. It would be better if you check out [How to Answer](https://stackoverflow.com/help/how-to-answer) page for the future endeavor at Stack overflow. -Thank you – Momin Jun 25 '20 at 13:19
  • 1
    While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Donald Duck Jun 25 '20 at 18:46