AngularJs中錨點的使用,及錨點偏移量設定

2021-07-09 03:47:45 字數 1192 閱讀 8245

angularjs中關於錨點的使用,及錨點偏移量設定

有很多人在使用ng-view時都用到了#號做route,所以如果在頁面上需要用到錨點的時候就會比較頭疼了。這個時候可以使用ng的anchorscroll。

使用了ng的anchorscroll後確實可以達到錨點跳轉的作用了,但是問題又來了,我如果頁面有乙個標題欄這個錨點的跳轉就不準確了,此時則需要設定偏移量了。

使用函式:

$anchorscroll([hash]);

param

type

details

hash (optional)

string

the hash specifying the element to scroll to. if omitted, the value of $location.hash() will be used.

如果設定,指定乙個垂直滾動偏移。這通常是有用的,當有在頁面的頂部有「fixed」定位的元素,如導航欄,標題等

yoffset可以以各種方式來指定:

為了yoffset正常工作,滾動應寫在文件的根而不是一些子元素。

示例**:

.run(['$anchorscroll', function

($anchorscroll) ])

.controller('view1ctrl', ['$scope', '$location', '$anchorscroll', function

($scope, $location, $anchorscroll) ;

}]);

html**:

class="center main-text">

href=""

ng-click="demo();">hahaha>

id="test">welcome to salibs.p>

this is the partial for view 1.a>

this is the partial for view 1.p>

this is the partial for view 1.p>

div>

附上angularjs的官方api

參考資料:

html 錨點的使用

html 錨點 到底是幹嗎的?通俗簡單地說,比如一篇很長的文章,你想按分段精確來看,那就可以用到錨點了。跳到001 文字省略 name 001 id 001 文字省略 其實錨點只需name就可以可,加id是為了讓它相容性更好.href的值要跟name i d 一致,前面必須加 以上 在ie6 7,f...

HTML錨點的使用

一 頁面內跳轉的錨點設定 頁面內的跳轉需要兩步 方法一 在頁面中需要的位置設定錨點 注意 a標籤中要寫乙個name屬性,屬性值要與 中的href的屬性值一樣,不加 標籤中按需填寫必要的文字,一般不寫內容 方法二 同方法一的 設定錨點的位置 在要跳轉到的位置的標籤中新增乙個id屬性,屬性值與 中hre...

iOS CALayer錨點的使用

calayer層的位置主要和position和anchorpoint有關。其中它們在一起才能決定層在檢視中的具體位置。property cgpoint position 位置 property cgpoint anchorpoint 錨點 錨點的範圍 0.0 1.0 具體的演示如下 1 採用預設的錨...