Html-一頁式網頁使用href滑頁

Posted on April 3, 2019 本文总阅读量次

Html-一頁式網頁使用href滑頁

原理

在每個區塊div設定id，讓
在menu的項目中設定每個項目的href目的位置為區塊div的id
用jquery增加scroller效果

實作

menu中的item使用<a>標籤，並將href設定為目標section的#id

<ul class="navbar-nav">
    <li>
        <a href="#section1">item 1</a>
    </li>
    <li>
        <a href="#section2">item 2</a>
    </li>
    <li>
        <a href="#section3" >item 3</a>
    </li>
</ul>

1
2
3

<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>

在body標籤中新增id

1	<body data-spy="scroll" data-target="#main-nav" id="home">

用jQuery初始化scrollspy

1	$('body').scrollspy({ target:'#mail-nav'});

添加Smooth Scrolling

所有在#main-nav中的<a>被click，就會執行函式

$('#main-nav a').on('click',function(event){
<!--check for a hash value -->
    if(this.hash !==""){
    
<!--    prevent default behavior -->
        event.preventDefault();
        
<!--    Store hash -->
        const hash = this.hash;
        $('html,body').animate({
            scrollTop: $(hash).offset().top
        }, 800, function(){
<!--        Add hush to URL after scroll -->
            window.location.hash = hash;
        })
    }
})

成果

My Project-LonelyPlanet