iT邦幫忙

2

頁面排版練習 - 錨點 TOP 按鈕

練習目標

  • 頁面排版
  • 錨點
  • Top 按鈕

CodePen

重點屬性

padding & margin

這是我們最常看到的排版元素

padding 內距 : 控制區域內元素離 區域的距離
margin 外距 : 控制區域外邊界距離 ,其他區域跟該區域的距離
善用兩個屬性就可以排出一個無形的空間提高頁面美感

background

很多頁面的圖片會隨著螢幕縮放,不過大多數都是用div 在只用background 屬性 將圖片設為背景, 如此圖片就能隨著div 的大小而伸縮,當然仍需做一些調整:

linear-gradient() : 漸層 ,這邊我用來做陰影效果,把圖片轉暗一點
background-repeat: no repeat 因為有時候圖片太小,會重複出現圖片補足空白,當然這不好看。
background-position center top 這邊我讓圖片調整為往上置中對齊,這樣能讓圖片比較完整的呈現

功能

錨點

大家都知道 就是用 href='#id' 標籤對上id 就能做,但是會有一個狀況,就是他是瞬間跳過去,這邊有一個共用的程式碼讓圖片用滑動的方式跳轉,複製貼上 大功告成

Smooth scrolling when clicking an anchor link

// 毛點跳轉動畫
$(document).on("click", 'a[href^="#"]', function(event) {
  event.preventDefault();

  $("html, body").animate(
    {
      scrollTop: $($.attr(this, "href")).offset().top
    },
    500
  );
});

底部TOP 按鈕

這也算是 前端必修課題ScrollTopˇ的觀念

我這邊是參考W3C-scroll_to_top

我調整成當他滑動距離為螢幕裝置的高度後,會出現Top按鈕

window.onscroll = function() {
  scrollFunction();
};

function scrollFunction() {
  if (
    document.body.scrollTop > document.body.clientHeight ||
    document.documentElement.scrollTop > document.documentElement.clientHeight
  ) {
    document.getElementById("float").style.display = "block";
  } else {
    document.getElementById("float").style.display = "none";
  }
}


尚未有邦友留言

立即登入留言