Question

I have a text and when I click the text, it will call the . My code is as follow.

<h5>Posted On: {{postedDate | date}} <a href="" style="float:right" >Table Plans</a></h5>

When I click Table Plans, it should call the div with id "tableImagesSliding".

<div id="tableImagesSliding" class="col-md-4 col-sm-4 col-xs-12">
    <div class="inner-box">
        <div class="mask-menu">
            <ul class="images ">
                <li class="display-inline" ng-repeat="tableImage in allTableImages">
                    <a href="" ng-click="showTableImage(tableImage.url)"><img ng-src="{{tableImage.url}}" width="600" height="400" /></a>
                </li>
            </ul>
        </div>
        <ul class="triggers-menu slider-btn">
            <li ng-repeat="cnt in tablemapcount"></li>
        </ul> 
    </div>
</div>

How can I do that?

Answer 1

您可以使用href标记的<a>属性，使用哈希符号指向页面上带有id的元素。

<a href="#tableImagesSliding">Jump to table plans</a>

<div id="tableImagesSliding">
  Table plans div
</div>

有关href有效使用的详情，您可以阅读有关a#href和id attribute

的MDN页面

然而，使用Angular时会涉及到更多...

Angular的路由器将参与进来，如果它无法识别路线，将（可能 - 取决于您的设置）重定向到主路线。

您可以使用$anchorScroll service让Angular为您跳转到div。

您的HTML现在包含ng-click，控制器使用$anchorScroll：

angular.module('so42186303', [])
  .controller('so42186303Ctrl', ['$scope', '$location', '$anchorScroll', function($scope, $location, $anchorScroll) {
     $scope.showTablePlans = function() {
       $location.hash('tableImagesSliding');
       $anchorScroll();
     };
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="so42186303">
  <div ng-controller="so42186303Ctrl">
    <a ng-click="showTablePlans()">Click to jump to table plans</a>
    
    <div style="height: 100vh; margin-top: 20px;">Content to jump past</div>
    
    <div id="tableImagesSliding" style="height: 100vh;">
      Table plans
    </div>
  </div>
</div>

Answer 2

如果通过电话你的意思是对div的位置scoll，答案是

<a href="#tableImagesSliding"> </a>

如何从<a href=""> link on the same html file

2 个答案: