Question

想到这需要一个更好的解释：

我有一些导航链接：

<a id="home" href="/">Home</a>
<a id="screenshots" class="scroll_to_screenshots" href="#">Screenshots</a>
<a id="ask" class="scroll_to_container" href="/ask">Support</a>

我有一个带有以下内容的js文件：

$(document).ready(function() {
$(".scroll_to_screenshots").click(function() {$.scrollTo($("#screenshots").position().top+10, 300)});
$(".scroll_to_container").click(function() {$.scrollTo($("#container").position().top-10, 300)});
});

现在截图它可以正常工作：它向下滚动到屏幕截图ID。然而，第二个需要首先加载页面，然后滚动。显然这不起作用（它会短暂向下滚动然后页面加载开始。我可以先将该操作更改为 - 加载页面 - 向下滚动吗？

然后显然我有另一个问题，当我在... /问第一个链接不再起作用。

Answer 1

<强>简单

你应该在页面加载功能中使用：

ScriptManager.RegisterStartupScript(this, GetType(), ToString(), "$.scrollTo($('#container').position().top-40, 300)", true);

Answer 2

将其放在联系页面中。

<script type="text/javascript">
  $(function(){
     $.scrollTo($("#container").position().top-40, 300);
  });
</script>

Answer 3

所以这就是诀窍。然而，如果有人有更精致，更优雅的答案，我会全力以赴。

// on the /example slug only
var fragment = 'example';

var url = window.location.href.split('/');

var last_item = url[url.length-2];
last_item = last_item.replace(/(\?|\#).*/, '');

if (last_item == fragment) {
    setTimeout(function() {$.scrollTo($("ul#posts").position().top, 300);}, 1000);

Answer 4

而不是使用它：

$(document).ready(function(){
   // Your stuff here
});

尝试使用：

$(window).load(function(){
   // Your stuff here
});

这将使脚本等到页面上的所有元素在滚动之前加载。

如何：在页面加载后Jquery Scrollto Action而不是单击？

4 个答案: