Question

我正在创建一个只有一个页面的网站，我需要将菜单和标题（已加入）固定在导航器的顶部，但我需要当用户按下一个菜单项时页面滚动到特定位置。我尝试在css中使用固定位置并锚定链接，但内容将转到导航器窗口的顶部并保留在菜单和标题下。

Answer 1

您可以使用window.scrollTo滚动到您的特定位置

$("#item").click(function(){
    window.scrollTo(500,0);
});

请参阅http://www.w3schools.com/jsref/met_win_scrollto.asp

Answer 2

使用jQuery：

$(".menuitem").click(function(e){
    e.preventDefault(); // prevent the default behavior of the anchor
    var top = $($(this).attr("data-target")).offset().top; // get the original ("bad") position
    var headerHeight = $("#menu").outerHeight(true); // get the height of the menubar
    var scrollTop = top-headerHeight; // calculate the wanted scrollTop
    
    $(window).scrollTop(scrollTop); // this is the scroller code
                                    // you can use animate or other fancy effect
                                    // if you need, for example:
                                    // $("html, body").aminate({"scrollTop": scrollTop}, 700);
});

#menu {
    background-color: #777777;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100px;
}

.menuitem {
    color: #FFFF00;
}

.target {
    margin-top: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="menu">
    <!-- (I suggest to separate data-target from href) -->
    <a href="#target1" class="menuitem" data-target="#target1">MENU 1</a>
    <a href="#target2" class="menuitem" data-target="#target2">MENU 2</a>
    <a href="#target3" class="menuitem" data-target="#target3">MENU 3</a>
    <a href="#target4" class="menuitem" data-target="#target4">MENU 4</a>
    <a href="#target5" class="menuitem" data-target="#target5">MENU 5</a>
</div>

<div id="target1" class="target"><a name="target1"></a> <!-- (<a> is for noscript support) -->
  TARGET 1
</div>

<div id="target2" class="target"><a name="target2"></a>
  TARGET 2
</div>

<div id="target3" class="target"><a name="target3"></a>
  TARGET 3
</div>

<div id="target4" class="target"><a name="target4"></a>
  TARGET 4
</div>

<div id="target5" class="target"><a name="target5"></a>
  TARGET 5
</div>

Answer 3

为此，您可以为动画命令设置一个回调函数，该函数将在滚动动画完成后执行。

例如：

var body = $("html, body");
body.animate({scrollTop:0}, '500', 'swing', function() { 
   alert("Finished animating");
});

警报代码在哪里，你可以执行更多的javascript来添加动画。

如何创建将网页滚动到特定位置的效果？

3 个答案: