Javascript Angular-ui路由器如何转到页面的特定部分

我知道如何在Ui路由器中将变量传递给链接

<a ui-sref="Category({ SCID: sc.scid })" ui-sref-active="active" >{{ sc.scname }}</a>

现在我想转到该页面的特定部分。假设节以id=123开头

<section id="123"> reach here directly on clicking link</section>

点击链接直接到达此处

这个问题也被其他一些用户问过

但这没有任何答案

---

有人能帮我在URL和.state中做些什么更改吗？

一个选项是，当您到达特定页面时，滚动到该部分

您可以为此目的使用该指令

您可以在控制器中找到具有

$scope.sectionId=$stateParams['SCID']| |-1//或其他一些默认设置

，然后滚动至：

var scrollOffset = 0, duration = 400;
var sectionElementId = "section" + $scope.sectionId; //you need to prefix the div id with "section" in this case or use just the SectionId
var sectionElement = angular.element(document.getElementById(sectionElementId));
$document.scrollToElement(sectionElement, scrollOffset, duration);

你在找什么

基本上，您需要做的是像往常一样设置路由，传递滚动参数，如：

url: '/first/:scrollTo',  

只需添加以下内容，注入

$anchorScroll

，它就会滚动到在

$location.hash（）中找到id的任何元素

然后，在html中，链接应如下所示：

<a href ui-sref="first({scrollTo: 'foo'})">First / Foo</a>

让事情更简单：

.state('first', {
  url: '/first/:scrollTo',  
  controller: 'FirstCtrl', 
  templateUrl: 'first.html',
  onEnter: scrollTo
}) 



您正在使用
ui路由器吗？@Razvan是的。。。我正在使用ui路由器而不是ngRouteThanks来响应。它工作得非常好。如果你知道的话，你能分享一些在滚动时添加平滑动画的链接吗？有一件事，现在我不能访问页面而不添加
/
，我必须在url中写下：
example.com/first/
，知道如何删除吗？@FireBrand这是因为UI路由器的
strictMode
url过滤。您可以通过在应用程序运行函数中注入
$URLMacherFactoryProvider
来禁用它，并将其设置为
$URLMacherFactoryProvider.strictMode（false）
@RazvanBalosin尝试注入您提到的提供程序会抛出一个注入器错误很好的答案，稍微改进：
$（“html，body”）。动画（{scrollTop:$（“#”+$stateParams.scrollTo）.offset（）.top}，1000）；
<a href ui-sref="first({scrollTo: 'foo'})">First / Foo</a>

.state('first', {
  url: '/first/:scrollTo',  
  controller: 'FirstCtrl', 
  templateUrl: 'first.html',
  onEnter: function ($location, $stateParams, $anchorScroll, $timeout) {
    $timeout(function() { 
      $location.hash($stateParams.scrollTo);
      $anchorScroll()
    }, 100)
  }
}) 

.state('first', {
  url: '/first/:scrollTo',  
  controller: 'FirstCtrl', 
  templateUrl: 'first.html',
  onEnter: scrollTo
}) 

var scrollTo = function() {
  function ($location, $stateParams, $anchorScroll, $timeout) {
    $timeout(function() { 
      $location.hash($stateParams.scrollTo);
      $anchorScroll()
    }, 100)
  }
};