平滑滾動到多個錨點

我是Web Dev的新手，我想創建一個可以使用側面導航欄向上滾動和向下滾動到多個錨點的網站。平滑滾動到多個錨點

這是我的HTML代碼，

<body> 
<div id="mySideDiv" class="divAnimate"> 
    <p id="head">HYUNJAE<br>WOO</p> 
    <div class="side"><a href="#home">HOME</a></div> 
    <div class="side"><a href="#portfolio">PORTFOLIO</a></div> 
    <div class="side"><a href="#contact">CONTACT</a></div> 
    <div class="side"><a href="#about">ABOUT</a></div> 
</div> 

<div class="mid-cont homePage" id="main"> 
    <article class="panel"><a id="home"></a> 
    <p> Welcome to My Website </p> 
    ... 
    </article> 

    <article class="panel"><a id="portfolio"></a> 
    <p> PORTFORLIO </p><br> 
    ... 
    </article> 

    <article class="panel"><a id="contact"></a> 
    <p> CONTACT </p><br> 
    ... 
</article> 

<article class="panel"><a id="about"></a> 
    <p> ABOUT </p><br> 
    ... 
</article>

我有這個工作只用標籤，但我想平穩過渡/滾動到錨我點擊邊欄上的每一次（我的側杆固定在位）。我已經通過互聯網進行了搜索，發現使用jQuery或JavaScript的答案很少，但是他們只有在它具有頂級滾動條的情況下才能工作。無論何時我試圖從CONTACT轉到PORTFOLIO，它都會將屏幕放置在HOME和PORTFOLIO之間。我覺得答案會非常明顯，但我無法弄清楚爲什麼......請幫助我。

來源

2016-12-28 Hyunjae Woo

其中一個鏈接，可以解決你的問題： https://css-tricks.com/snippets/jquery/smooth-scrolling/ http://stackoverflow.com/問題/ 7717527 /平滑滾動 - 點擊 - 錨 - 鏈接 –

這樣的事情http://stackoverflow.com/questions/34571656/difference-between-current-position-and-scrolled-position-with-jquery/34572021＃34572021 ?? –

你檢查this答案嗎？你的HTML代碼將是：

<div class="side"><a href="#home" onclick="SmoothScroll()">HOME</a></div> 

function SmoothScroll() { 
    e.preventDefault(); 
    var target = $(this).attr("href"); 
    $('html, body').animate({ 
     scrollTop: $(""+target).offset().top 
    }, 2000);}

來源

2016-12-28 09:53:23

你檢查了我的答案嗎？ –

您可以使用下面的代碼這樣的功能：

$(".same-page-links").on("click", function(e){ 
    e.preventDefault(); 
    var target = $(this).attr("href"); 
    if($(""+target).length) 
    { 
    var targetOffset = $(""+target).offset().top; 
    $("html, body").animate({"scrollTop": targetOffset}, 500); 
    } 
});//click

在這裏，我假設所有這些環節有一個類「相同頁面的鏈接」。點擊這些鏈接後，您可以從其href屬性或任何其他屬性中獲取目標元素的ID。一旦你有了，你只需要知道該元素的offset().top，並使用jQuery animate方法滾動到該偏移量。

還有一件事，你不應該創建空的a元素來包含你的目標ID，你應該將這些ID分配給這些文章本身。例如代替

<article class="panel"><a id="about"></a>

你應該這樣做

<article id="about" class="panel">

來源

2016-12-28 09:47:56

平滑滾動到多個錨點

回答

相關問題