几秒钟后滚动到锚点位置

3

我想知道是否可以在6秒后滚动到锚点?

我找到了一个脚本,它可以向下滚动几个像素,但这并不完全是我要找的。

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

还有,如何使滚动平稳下降? 我找到了这个,但是我该怎么将它与其他脚本结合起来使用呢?

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

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

我对JS并不是很熟悉,所以真的需要一些帮助 :)

我正在处理的网站是:kip.mascomm.be

更新:

在Seth的帮助下,我已经解决了第一个问题,请问有人可以给我提供一段代码使得性能更加流畅吗?

var delay = 1000 * 10;
    setTimeout(function() {
        location.hash = "#kippenkramen";
    }, delay);
2个回答

2

时间延迟示例:

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); 

(如何在JavaScript中设置时间延迟)

动画滚动函数:

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);
}

(跨浏览器的 JavaScript(不是 jQuery...)回到页面顶部动画)


1
感谢Seth! 使用location.hash的时间延迟功能成功了: var delay=1000 * 10; setTimeout(function(){ location.hash = "#kippenkramen"; },delay); 我将动画滚动函数粘贴到其他脚本下面,但它没有起作用。 - den_dhaeze

0
  document.querySelectorAll('a[href]').forEach( el => {
    el.onclick = (e) => {
      e.preventDefault()
      setTimeout(() => {
        window.location = el.getAttribute('href')
      }, 6000);
    }
  })

4
欢迎来到StackOverflow。为了更好地在StackOverflow上发挥作用,建议您查看如何回答页面。-谢谢 - Momin
1
虽然这段代码可能回答了问题,但提供有关它如何以及/或为什么解决问题的附加上下文将改善答案的长期价值。 - Donald Duck

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接