【问题标题】:Scrolling down after a few seconds to an anchor几秒钟后向下滚动到锚点
【发布时间】:2015-06-28 18:53:06
【问题描述】:

我想知道是否可以在 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);

【问题讨论】:

    标签: javascript time scroll anchor smooth


    【解决方案1】:

    时间延迟示例:

    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)

    动画滚动功能:

    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)

    【讨论】:

    • 感谢赛斯! location.hash 的时间延迟事情起作用了: var delay=1000 * 10; setTimeout(function(){ location.hash = "#kippenkramen"; },延迟);我将动画滚动功能粘贴在另一个脚本下,但它不起作用。
    【解决方案2】:
      document.querySelectorAll('a[href]').forEach( el => {
        el.onclick = (e) => {
          e.preventDefault()
          setTimeout(() => {
            window.location = el.getAttribute('href')
          }, 6000);
        }
      })
    

    【讨论】:

    • 欢迎来到 Stackoverflow。如果您查看 How to Answer 页面以了解将来在 Stack Overflow 上的努力会更好。 -谢谢
    • 虽然此代码可能会回答问题,但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。
    猜你喜欢
    • 1970-01-01
    • 2016-06-03
    • 1970-01-01
    • 2019-02-12
    • 1970-01-01
    • 1970-01-01
    • 2012-06-26
    • 1970-01-01
    • 2013-01-06
    相关资源
    最近更新 更多