AngularJS $anchorScroll 子元素内的 yOffset

2023-12-22

据我了解, $anchorScroll yOffset 在子元素中是不可能的: “为了使 yOffset 正常工作,滚动应该发生在文档的根元素上,而不是某些子元素上。”https://docs.angularjs.org/api/ng/service/ https://docs.angularjs.org/api/ng/service/$anchorScroll

示例(根据 AngularJS 文档修改): 我想单击一个链接,并在滚动到的内容上方添加“之间”一词。

索引.html

<body ng-app="anchorScrollOffsetExample">
    <div class="fixed-header" ng-controller="headerCtrl">
    <a href="" ng-click="gotoAnchor(x)" ng-repeat="x in [1,2,3,4,5]">
      Go to inner-anchor {{x}}
    </a>
  </div>
  <div id="anchor" class="anchor">
    <div ng-repeat="x in [1,2,3,4,5]">
        between
        <div id="innerAnchor{{x}}" class="anchor" >Inner-Anchor {{x}} of 5</div>
    </div>
  </div>
</body>

样式.css

  .anchor {
    border: 2px dashed DarkOrchid;
    padding: 10px 10px 200px 10px;
    max-height:500px;
    overflow-y: auto;
  }

脚本.js

angular.module('anchorScrollOffsetExample', [])
.run(['$anchorScroll', function($anchorScroll) {
  $anchorScroll.yOffset = 500;
}])
.controller('headerCtrl', ['$anchorScroll', '$location', '$scope',
  function ($anchorScroll, $location, $scope) {
    $scope.gotoAnchor = function(x) {
      var newHash = 'anchor' + x;
      if ($location.hash() !== newHash) {
        $location.hash('innerAnchor' + x);
      } else {
        $anchorScroll();
      }
    };
  }
]);

http://plnkr.co/edit/yFj9fL3sOhDqjhMawI72?p=preview http://plnkr.co/edit/yFj9fL3sOhDqjhMawI72?p=preview

有没有一种好方法可以在 AngularJS(最好没有 jQuery 或其他库)中执行此操作,而无需将“之间”移动到我滚动到的 DIV 内部?


为什么不使用锚标签?

<body ng-app="anchorScrollOffsetExample">
    <div class="fixed-header" ng-controller="headerCtrl">
    <a href="" ng-click="gotoAnchor(x)" ng-repeat="x in [1,2,3,4,5]">
      Go to inner-anchor {{x}}
    </a>
  </div>
  <div id="anchor" class="anchor">
    <div ng-repeat="x in [1,2,3,4,5]">
        <!-- Add an anchor above the text, and we scroll here instead of the div -->
        <a name="innerAnchor{{x}}"></a>
        between
        <div class="anchor" >Inner-Anchor {{x}} of 5</div>
    </div>
  </div>
</body>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS $anchorScroll 子元素内的 yOffset 的相关文章

  • 如何测试 javascript 闭包内的函数

    这似乎是不可能的 也可能是 但我正在尝试更多的 TDD 但我总是在闭包方面碰壁 假设我有以下内容 function createSomething init function privateMethod param return init
  • 从数据 URI 解码 QR 码

    我尝试从数据 uri 中解码二维码 var dataUri data image gif base64 R0lGODdh9gD2AIAAAAAAAP ywAAAAA9gD2AAAC decodeQrCode dataUri cb 我已经尝试
  • angularjs:timeout 在 $http POST 请求中不起作用

    我的代码中有以下代码片段 它为请求设置了以毫秒为单位的超时 但即使满足超时 它也不会取消 var httpURL method URLobj method url urlString data data withCredentials tr
  • jQuery AJAX 调用 Java 方法

    使用 jQuery AJAX 我们可以调用特定的 JAVA 方法 例如从 Action 类 该 Java 方法返回的数据将用于填充一些 HTML 代码 请告诉我是否可以使用 jQuery 轻松完成此操作 就像在 DWR 中一样 此外 对于
  • 如何防止 Iframe 在与浏览器交互后弄乱浏览器的历史记录?

    因此 就我而言 我使用 Iframe 将 Grafana 附加到我的页面 这为我提供了漂亮且易于使用的图表 可以注意到 每次在图表上进行放大或缩小 使用鼠标单击 交互后 Grafana 的 Iframe 都会在我的 Angular 页面上触
  • 在 Wordpress 站点中进行 AJAX 调用时出现问题

    我在使用 Wordpress 站点功能的 AJAX 部分时遇到了一些问题 该功能接受在表单上输入的邮政编码 使用 PHP 函数来查找邮政编码是否引用特定位置并返回到该位置的永久链接 我的第一个问题是关于我构建的表单 现在我的表单操作是空白的
  • 在requestAnimationFrame中使用clearRect不显示动画

    我正在尝试在 HTML5 画布上做一个简单的 javascript 动画 现在我的画布是分层的 这样当我收到鼠标事件时 背景层不会改变 但带有头像的顶层会移动 如果我使用 requestAnimationFrame 并且不清除屏幕 我会看到
  • 如何将 Google Charts 与 Vue.js 库一起使用?

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google
  • Jquery/Javascript 上传和下载文件,无需后端

    是否可以在没有后端服务器的情况下在 JavaScript 函数中下载和上传文件 我需要导出和导入由 JavaScript 函数生成的 XML 我想创建按钮 保存 xml 来保存文件 但我不知道是否可行 另一方面 我希望将 XML 文件直接上
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • Babel 7 Jest Core JS“TypeError:wks不是函数”

    将我的项目升级到 Babel 7 后 通过 Jest 运行测试会抛出以下错误 测试在 Babel 6 中运行没有任何问题 但在 Babel 7 中失败并出现以下错误 TypeError wks is not a function at Ob
  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做
  • Grails 在 javascript 内的 GSP 站点中使用 grails var

    我有一个在 GSP 文件中的 javascript 代码中使用 grails 变量值的问题 例如 我有一个会话值session getAttribute selectedValue 我想在 javascript 代码部分使用这个值 我现在的
  • Javascript 数组到 VBScript

    我有一个使用 Javascript 构建的对象数组 我需要使用 VBScript 读取它 如下例所示 我找不到在 VbScript 代码中循环遍历数组的方法myArray object 这个例子是我的问题的简化 我无法更改页面的默认语言 这
  • HTML 离线应用程序缓存,列出下载的文件

    作为我正在构建的离线 Web 应用程序的加载屏幕的一部分 使用缓存清单 http developer apple com library safari documentation iPhone Conceptual SafariJSData
  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div
  • Safari 支持 JavaScript window.onerror 吗?

    我有一个附加到 window onerror 的函数 window onerror function errorMsg url line window alert asdf 这在 firefox chrome 和 IE 中工作正常 但在 s
  • 为什么 jquery 没有检测到单选按钮未被选中的情况? [复制]

    这个问题在这里已经有答案了 可能的重复 JQuery radioButton change 在取消选择期间不会触发 https stackoverflow com questions 5176803 jquery radiobutton c
  • 导致回发到与弹出窗口不同的页面

    我有一个主页和一个详细信息页面 详细信息页面是从主页调用的 JavaScript 弹出窗口 当单击详细信息页面上的 保存 按钮时 我希望主页 刷新 是否有一种方法可以调用主页的回发 同时还可以从详细信息页面维护保存回发 Edit 使用win
  • 如何从图像输入中获取 xy 坐标?

    我有一个输入设置为图像类型

随机推荐