帶一個頁面的點導航

-1

我有一個帶點導航和錨鏈接的頁面。但我想錨鏈接指向該節中段，中心verticaly在頁面甚至與窗口的大小，就像這樣：帶一個頁面的點導航

大亮點：

較小的窗口：

此外，如何使突出顯示的鏈接點導航？像這樣的點導航：https://www.gumtreejobs.sg/當您在該部分上時，該點會變成綠色。

HTML：

<div class="nav"> 
     <a href="#section01">01</a> 
     <a href="#section02">02</a> 
     <a href="#section03">03</a> 
     <a href="#section04">04</a> 
</div> 


<div class="content"> 
     <div class="section" id="section01">Section 01</div> 
     <div class="section" id="section02">Section 02</div> 
     <div class="section" id="section03">Section 03</div> 
     <div class="section" id="section04">Section 04</div> 
</div>

CSS：

body { 
    margin:0; 
} 


.nav { 
    position:fixed; 
    right:0; 
} 


.nav a { 
    display:block; 
    margin:10px; 
    height:30px; 
    width:30px; 
    border-radius:100%; 
    background:grey; 
} 

.nav a:hover { 

    background: orange; 
} 

.nav a.active{ 
    background: red; 
} 

.section { 
    height:200px; 
    background:pink; 
    margin:100px; 

    }

來源

2016-12-29 user3870112

你可以檢查你的樣張，看看CSS定義 – Garfield

添加這裏麪點擊功能之前的動畫添加活動類錨。

$('.nav a').removeClass('active'); 
$(this).addClass('active');

來源

2016-12-29 13:11:20

這裏是你想要什麼的jsfiddle：https://jsfiddle.net/5oz0uzuz/1/

示例代碼：

$('a').click(function(){ 
    var $elem = $($(this).attr("href")); 
    var offset = $elem.offset().top - ($(window).height()/2) + ($elem.height()/2); 
    $('html, body').animate({ 
    scrollTop: offset 
    }, 400); 
    $(this).addClass("active").siblings().removeClass("active"); 
    return false; 
});

首先我加入活性類的點擊處理程序，並從所有的兄弟姐妹刪除它。通過這種方式，你可以確保當前的項目總是有班級。

對於滾動部分，您只需將目標元素的一半高度添加到滾動條上。

我希望這有助於

來源

2016-12-29 13:38:31

修改我的問題，可能與圖像這將是更容易理解。謝謝 – user3870112

我更新了我的答案：P –

完美！：D當您滾動顯示錨點位置時，是否知道如何用紅色突出顯示點？（沒有德點擊，只有滾動）像這樣：https://www.gumtreejobs.sg/ – user3870112

帶一個頁面的點導航

回答

相關問題