滚动到链接不起作用答案

【问题标题】：Scroll to link isn't working滚动到链接不起作用
【发布时间】：2014-01-14 15:43:46
【问题描述】：

我正在尝试为我的滚动设置动画，但我使用的代码似乎只是跳转到链接而不是动画。我似乎找不到为什么它不能正常工作的问题。

我在 HTML 中使用过 Jquery - 这可能是个问题吗？内外都试过了。

<doctype html>

<head>
<title>Creative Designer</title>
<link rel="stylesheet" href="css/style.css" type="text/css">


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 2000);
        return false;
      }
    }
  });
});
</script>

</head>


<body>

<nav>
<ul>    
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#work">Work</a></li>

    </ul>
 </nav>

   <section>
        <h1>featured Projects</h1>

<p id="description">
    I am an Creative Designer Based in Newcastle Upon Tyne
</p>

</section>

<section>


<section id="about">
This is about
</section>



<div id="mainfooter">


</div>

</body>


</html>

【问题讨论】：

标签： jquery hyperlink scroll jquery-animate

【解决方案1】：

对我来说效果很好，使用这个带有选择器“anchorLink”的 jquery 扩展锚滑块到你的菜单类：

HTML 示例菜单

    <nav>
        <ul>
            <li><a class="introlink anchorLink" href="#intro">Intro</a></li>
            <li><a class="aboutlink anchorLink" href="#about">About</a></li>
            <li><a class="contactlink anchorLink" href="#contact">Contact</a></li>
        </ul>               
    </nav>

HTML 部分示例

<section id="intro">

    <h2 class="intro">blah blah blah<span class="sub">blah blah blah</span></h2>

    <p class="featured">blah blah blah</p>


</section>

JQuery 锚滑块：

$(document).ready(function() {
    $("a.anchorLink").anchorAnimate()
});

jQuery.fn.anchorAnimate = function(settings) {

    settings = jQuery.extend({
        speed : 1100
    }, settings);   

    return this.each(function(){
        var caller = this
        $(caller).click(function (event) {  
            event.preventDefault()
            var locationHref = window.location.href
            var elementClick = $(caller).attr("href")

            var destination = $(elementClick).offset().top;
            $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
                window.location.hash = elementClick
            });
            return false;
        })
    })
}

【讨论】：

非常感谢！但它仍然有效，但我认为如果我在固定 div 中使用导航会影响滚动
我现在开始工作了！非常感谢您的帮助亚伦