Question

我的页面顶部有导航链接。我将每个链接锚定到页面下方的相应div。我不能让它过渡，它只是自动跳转。我在Scrolling to an Anchor using Transition/CSS3尝试了解决方案。我的代码是：

<ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="#home" onclick="test('home'); return false;">HOME</a></li>
    <li><a href="#about" onclick="test('about'); return false;"> ABOUT</a></li>
    <li><a href="#portfolio" onclick="test('portfolio'); return false;"> PORTFOLIO</a></li>
    <li><a href="#projects" onclick="test('projects'); return false;"> PROJECTS</a></li>
    <li><a href="#contact" onclick="test('contact'); return false;"> CONTACT</a></li>
  </ul>

<div class = "vertSpace" id = "home">
<div class="jumbotron">
  <h1>Join The Information Superhighway For Free</h1>
  <hr>
  <p></p>
</div>
</div>

<div class = "vertSpace" id = "about">
<div class="jumbotron">
  <h1>About Me</h1>
  <hr>
  <p></p>
</div>
</div>

的Javascript

function scrollTo(to, duration) {
if (document.body.scrollTop == to) return;
var diff = to - document.body.scrollTop;
var scrollStep = Math.PI / (duration / 10);
var count = 0, currPos;
start = element.scrollTop;
scrollInterval = setInterval(function(){
    if (document.body.scrollTop != to) {
        count = count + 1;
        currPos = start + diff * (0.5 - 0.5 * Math.cos(count * scrollStep));
        document.body.scrollTop = currPos;
    }
    else { clearInterval(scrollInterval); }
},10);
}

function test(elID)
{
    var dest = document.getElementById(elID);
    scrollTo(dest.offsetTop, 500);
}

Answer 1

您需要将事件传递给它以阻止它执行默认操作并跳转到元素。

function test(e, elID)
{
    e.preventDefault();
    var dest = document.getElementById(elID);
    scrollTo(dest.offsetTop, 500);
}

并在HTML中

onclick="test(event, 'about');"

Answer 2

我已就此问题here制作了一个codepen。

最好的JS功能来做＆＃34;平滑滚动＆＃34;是这样的：

$(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
        }, 1000);
        return false;
      }
    }
  });
});

Answer 3

这是一个简单的jQuery解决方案：

var $root = $('html, body');
$('ul li a').click(function () {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});

Answer 4

使用原始实现并且没有jQuery可以解决这个问题：

首先，它会抛出一个错误元素＆＃39;未定义;你应该替换为：

document.body.scrollTop;

为了更好地重复使用，我建议您使用eventListeners而不是onclick。

http://codepen.io/kevinfarrugia/pen/KayVLb

过渡到页面上的锚点

4 个答案: