Question

我正在尝试创建一个带有内部跳线链接的页面，以跳转到同一页面中的特定锚标记或标题标记。

我希望跳线链接在滚动时固定在顶部，并在页脚到达页脚时滚动页脚。

我希望滚动到特定的链接而不刷新页面，因为我点击任何快速链接..

我还要强调当前正在滚动的锚链接..

我试图这样做，但这就是我想出的......

function goToByScroll(hash) {
$(document.body).animate({
    'scrollTop':   $(hash).offset().top
}, 500);
   }

 var $links = $('#links');
 var $content = $('#content');
 height = $(window).height();

 $(window).scroll(function(){

if ($(window).scrollTop() >= height ){

    $links.css({ position:'fixed', top:'70px'});
    $content.css({ marginLeft: '80px'});

} else {

    $links.css({ position:'relative'});
    $content.css({ marginLeft: '9px'});

}

});

// http://jsfiddle.net/MfS3J/13/

基本上我想创造这样的东西 galaxy s4 review - the verge

Answer 1

您可以使用jQuery Waypoint插件http://imakewebthings.com/jquery-waypoints/

使用此插件，只要窗口的顶部（或底部）到达某个元素，您就可以触发事件。

E.G。

$('#id_of_container').waypoint(function(direction) {
  if(direction=='down'){
    $(this).css('position','fixed');
  } else {
    $(this).css('position','');
  }
});

Answer 2

这是你想要的吗？ http://jsfiddle.net/MfS3J/15/，你问了很多问题你可以用

<a href="#jump_1">header 1</a>

跳转

<a name="jump_1"></a>

而不是js功能

如何创建浮动内部链接容器

2 个答案: