内部錨點 Internal Link

結構

  1. 製作錨點
  2. 用jQuery做出滑順滑動效果

範例

button
 //加smooth,對應下面的js
 a.smooth(href="#next") click it
.blank
#next the next box
#next
 width: 200px
 height: 100px
 border: 1px solid #000
 text-align: center
 padding-top: 70px
 
.blank
 height: 100vh
function scrollToElement (selector) {
 $('html, body').animate({
 scrollTop: $(selector).offset().top
 }, 2000); 
};

$(document).on('click', 'a.smooth', function () {
 scrollToElement($(this).attr('href'));
});

Display
click it

the next box

Leave a Reply

Your email address will not be published. Required fields are marked *