草庐IT

javascript - 在 AngularJS 中滚动总是在顶部

coder 2025-01-21 原文

我正在使用 AngularJS(MEAN.io 堆栈)，我遇到了一个与滚动相关的恼人故障。

当用户点击一个链接时，目标页面的滚动位置与原始页面相同，而不是停留在顶部。

为了修复这种奇怪的行为，我使用了 next:

$rootScope.$on("$viewContentLoaded", function () {
  $anchorScroll();
});

但是这段代码让每个页面都滚动到顶部位置，这也很烦人，因为用户必须能够返回并恢复之前的滚动位置。

有什么建议吗？我怎样才能得到想要的结果？

谢谢!

编辑--------------------

当我尝试使用 ng-view + autoscroll 解决方案时，它对我不起作用，我也不知道为什么。

这是我在服务器提供的 default.html 页面中使用它的方式:

<body ng-cloak class="ng-cloak" ng-class="{state: true, auth: authPage}" ng-controller="BodyController">

      <div ng-include="'/system/views/header.html'"></div>

    <section class="content">
      <div data-ng-include="'/ceh-admin/views/adminShortcuts.html'"></div>
      <div ng-view autoscroll="true">{% block content %}{% endblock %}</div>
    </section>

    <div data-ng-include="'/system/views/footer.html'"></div>

    {% include '../includes/foot.html' %}

  </body>

我的 HTML 代码中有什么奇怪的东西？

最佳答案

根据 ngView documentation您需要声明如何处理滚动。

autoscroll (optional) string Whether ngView should call $anchorScroll to scroll the viewport after the view is updated.

  • If the attribute is not set, disable scrolling.
  • If the attribute is set without value, enable scrolling.
  • Otherwise enable scrolling only if the autoscroll attribute value evaluated as an expression yields a truthy value.

默认情况下它是禁用的，因此您需要将以下内容添加到您的标记中:

<div ng-view autoscroll></div>

或(根据文档并根据您的喜好):

<div ng-view autoscroll="true"></div>

关于javascript - 在 AngularJS 中滚动总是在顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29752485/

javascriptAngularJSsection34codejquerycssmean.io

有关javascript - 在 AngularJS 中滚动总是在顶部的更多相关文章

  1. ruby-on-rails - Rails - 乐观锁定总是触发 StaleObjectError 异常 - 2

    我正在学习Rails，并阅读了关于乐观锁的内容。我已将类型为integer的lock_version列添加到我的articles表中。但现在每当我第一次尝试更新记录时，我都会收到StaleObjectError异常。这是我的迁移:classAddLockVersionToArticle当我尝试通过Rails控制台更新文章时:article=Article.first=>#我这样做:article.title="newtitle"article.save我明白了:(0.3ms)begintransaction(0.3ms)UPDATE"articles"SET"title"='dwdwd

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  4. ruby-on-rails - 获取 ActionController::RoutingError(当尝试使用 AngularJS 将数据发布到 Rails 服务器时，没有路由匹配 [OPTIONS] "/users" - 2

    尝试从我的AngularJS端将数据发布到Rails服务器时出现问题。服务器错误:ActionController::RoutingError(Noroutematches[OPTIONS]"/users"):actionpack(4.1.9)lib/action_dispatch/middleware/debug_exceptions.rb:21:in`call'actionpack(4.1.9)lib/action_dispatch/middleware/show_exceptions.rb:30:in`call'railties(4.1.9)lib/rails/rack/logg

  5. ruby - Ruby 导入的方法总是私有(private)的吗？ - 2

    最好用一个例子来解释:文件1.rb:deffooputs123end文件2.rb:classArequire'file1'endA.new.foo将给出错误“':调用了私有(private)方法'foo'”。我可以通过执行A.new.send("foo")来解决这个问题，但是有没有办法公开导入的方法？编辑:澄清一下，我没有混淆include和require。另外，我不能使用正常包含的原因(正如许多人正确指出的那样)是因为这是元编程设置的一部分。我需要允许用户在运行时添加功能；例如，他可以说“run-this-app--includefile1.rb”，应用程序的行为将根据他在file1

  6. ruby-on-rails - 为什么 do/end 和 {} 不总是等价的？ - 2

    这个问题在这里已经有了答案:关闭11年前。PossibleDuplicate:RubyblockandunparenthesizedargumentsWhatisthedifferenceorvalueoftheseblockcodingstylesinRuby?我一直认为以下只是同一件事的两种表达方式:[1,2,3].collect{|i|i*2}[1,2,3].collectdo|i|i*2end但是我在我的一个ERB模板中发现了一些奇怪的行为，这两种语法似乎在做两件不同的事情。这段代码效果很好:m))}}%>但是当我将其重写为:m))endend%>...我最终得到了我的@men

  7. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  8. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  9. ruby - Ruby 中的 "=="是否总是值相等？ - 2

    抱歉，如果重复(我没找到)这只是为了确认Ruby的运算符==始终执行相等比较。IE。a==b将a的值与b的值进行比较，而不是像Java那样比较它们是否指向内存中的同一个对象(对于后者，在Ruby中，您应该使用a.object_id==b.object_id).因此，在Ruby中将字符串值与==进行比较是安全的(而在Java中这样做并不安全)谢谢编辑:问题在于任何Ruby对象的默认==行为，因为它会误导Java-C-C++程序员假设a==b比较引用本身，而不是引用内容。无论如何，你可以检查这段代码，使用字符串one="hello"two="he"two编辑2。所以，在Ruby中，比较a=

  10. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

随机推荐