javascript 的滑動式網頁內部超連結

---這裡是內文編輯區塊的頂部----



文件內部超連結的互動移動，是最常用到的互動技巧之一。

在這裡，我們使用 javascript 來達到這一文本的互動目的。先試一下互動功能來理解。

click!!  我會滑動到 【程式語法】區

如你所看到，按下去後，網頁會向上滑動到指定的位置。這裡所設定的是物件 span id="aa1"。

這個簡單的程式，但卻很有用。

程式中你會看到有紅色字的 +375 ，這是這個布落格布局上的需求所加的。指的是從內文區塊頂到螢幕頂的距離。

 以下的空白是製造可以滑動的必要空間。

---------------------------------------------------------------------------

補充：外部超連結的語法

<script>
function myFunction() {
  window.open("https://www.w3schools.com", "_blank“);  //開新視窗；-self  原視窗開啟。
}
</script>

--------------------------------------------------------------------
 

程式語法：


<div class="testclass" onclick="myFun0506()">click!!&nbsp; 我會滑動到 【程式語法區】</div>


<u><b><span id="aa1">程式語法</span></b></u>


 <script>
      function myFun0506() {
      var el = document.querySelector("#aa1");
      window.scroll({top: el.offsetTop +357 , behavior: 'smooth'});  //+357這是內文區塊頂到螢幕頂部的距離。
      }
 </script>