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

css 網頁設計

Luis-Chen 2017-12-23 13:53:36 ‧ 3349 瀏覽

分享至

練習目標

頁面排版
錨點
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";
  }
}

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言