延迟后的JS滚动

我试图让我的网站滚动到单独页面上的特定帖子。我想到了PHP的背后部分为我生成锚点，但是我被JS部分困住了。我设法让网页从位置0,0开始，然后转到静态锚标签。我所苦恼的是如何让JS从当前URL获取锚点标记，然后在短暂延迟后使其平滑滚动到给定标记。延迟后的JS滚动

我当前的代码是：

$(document).ready(function() { 
    if (location.hash) { 
     window.scrollTo(0, 0); 
     } 
}); 

setTimeout("window.location.hash = '#scroll';", 5000);

我发现下面的文档片断，其获取的锚标记过的网址，但我不知道我怎样才能让它在一定的延迟后执行。

$(document).ready(function() { 
     function filterPath(string) { 
     return string 
     .replace(/^\//,'') 
     .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
     .replace(/\/$/,''); 
     } 
     var locationPath = filterPath(location.pathname); 
     var scrollElem = scrollableElement('html', 'body'); 

     $('a[href*=#]').each(function() { 
     var thisPath = filterPath(this.pathname) || locationPath; 
     if ( locationPath == thisPath 
     && (location.hostname == this.hostname || !this.hostname) 
     && this.hash.replace(/#/,'')) { 
      var $target = $(this.hash), target = this.hash; 
      if (target) { 
      var targetOffset = $target.offset().top; 
      $(this).click(function(event) { 
       event.preventDefault(); 
       $(scrollElem).animate({scrollTop: targetOffset}, 400, function() { 
       location.hash = target; 
       }); 
      }); 
      } 
     } 
     }); 

     // use the first element that is "scrollable" 
     function scrollableElement(els) { 
     for (var i = 0, argLength = arguments.length; i <argLength; i++) { 
      var el = arguments[i], 
       $scrollElement = $(el); 
      if ($scrollElement.scrollTop()> 0) { 
      return el; 
      } else { 
      $scrollElement.scrollTop(1); 
      var isScrollable = $scrollElement.scrollTop()> 0; 
      $scrollElement.scrollTop(0); 
      if (isScrollable) { 
       return el; 
      } 
      } 
     } 
     return []; 
     } 

    });

来源

2012-11-08 Ninetou

我设法解决使用片段，我就发现CSS-Tricks forum我的问题。它在页面加载时滚动到一个定位标记，始终从页面的顶部开始。

$(window).bind("ready", function() { 
    var urlHash = window.location.href.split("#")[1]; 
    $('html,body').animate({scrollTop:$('a[href="#'+urlHash+'"]').offset().top}, 1500);   
});

来源

2012-11-10 17:35:45 Ninetou

我不相信setTimeout接受任何作为字符串传递的旧代码，只有函数名称。尝试使用匿名函数：

setTimeout(function() { window.location.hash = '#scroll'; }, 5000);

来源

2012-11-08 20:19:31 sgroves

将一个字符串传递给setTimeout/Interval是有效的，并且有效，这只是不好的做法。 'setTimeout（“alert（'Hello！'）”，1000）;' – Stecman

哦，很奇怪。 javascript很奇怪。 – sgroves

我现在的代码实际上工作正常，你的代码也是如此。我试图获得平滑的滚动效果，主要是因为我的JS知识非常有限，我只是不知道如何将两个片段（我之前提到过）连接在一起。 – Ninetou

延迟后的JS滚动

回答

相关问题