如何创建将网页滚动到特定位置的效果？ [复制]答案

【问题标题】：How I can create the effect to scroll a wbe page to a specific position? [duplicate]如何创建将网页滚动到特定位置的效果？ [复制]
【发布时间】：2014-12-08 02:57:51
【问题描述】：

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

【问题讨论】：

标签： jquery html css

【解决方案1】：

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

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

见http://www.w3schools.com/jsref/met_win_scrollto.asp

【讨论】：

【解决方案2】：

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

例如：

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

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

【讨论】：

【解决方案3】：

使用 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>

【讨论】：

如果你希望滚动动画而不是跳转到位置 --> $("body").animate({scrollTop:scrollTop}, 400)