平滑滚动到多个锚点

问题描述：

我是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之间。我觉得答案会非常明显，但我无法弄清楚为什么......请帮助我。

其中一个链接，可以解决你的问题： https://css-tricks.com/snippets/jquery/smooth-scrolling/ http://*.com/问题/ 7717527 /平滑滚动 - 点击 - 锚 - 链接 –

这样的事情http://*.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);}

你检查了我的答案吗？ –

答

您可以使用下面的代码这样的功能：

$(".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">

平滑滚动到多个锚点

相关推荐