室內設計2:其他應用

範例結果

二、右下角goTop 捲動置頂

S1 :利用Font-Awesome加入goTop鈕

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<div class="gotop"><i class="fa fa-chevron-up fa-2x" aria-hidden="true"></i></div>

S2:CSS美化按鈕至右下角

/*.gotop ===============================================*/
.gotop{
  position: fixed; bottom: 30px; right: 30px;
  width: 60px; height: 60px; line-height: 60px; text-align: center;
  background: rgba(65,64,64,0.6); text-shadow: 1px 1px #000;color: #fff;
  border-radius: 10px; cursor: pointer;
}

S2:加入JQ【.gotop】捲動至頂

//S6:【.gotop】 捲動至頂
	$('.gotop').click(function(){
//		$('html,body').scrollTop(0);
		$('html,body').animate({scrollTop:0},1000);
	});

scrollTop 雖然在 jQuery 中是一個函式,但它其實也是 DOM 物件的一個屬性,因此我們就能利用改變 scrollTop 值的方式來達到動畫的效果了

參考連結:scrollTop()animate()(En)

 

三、JQ加入讓上方nav移至各頁

//S7: nav click 捲動至各頁
  $('nav div').click(function(){
    var $navIndex = $(this).index();
  //		console.log($navIndex);
    var $sectionTop = $('section').eq($navIndex).offset().top;
    $('html,body').animate({scrollTop:$sectionTop},1000);
  });

position().left = 相對座標X軸 (父容器)、position().top = 相對座標Y軸 (父容器)
offset().left = 絕對座標X軸、offset().top = 絕對座標Y軸

參考連結:jQuery offset() 方法jQuery position() 方法