当我尝试使用锚点和 id 滚动页面时，它无法正常工作

Question

当我点击那个 Check out Here ! 按钮时 它不能完美地出现在屏幕中间

这是http://wineoir.com/index.html的链接？

我想在屏幕中间对齐视频部分 请帮助我 ！如何做到这一点

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <img src="img/branding-2.jpg" class="img-responsive center-block" alt="tv">

            <p> &nbsp;</p>

        </div>
        <div class="col-md-8 ">
            <p> &nbsp; </p>
            <p> &nbsp;</p>
            <p> &nbsp; </p>
            <p> &nbsp; </p>
            <h2 class="text-center">Now aerate and pour your wine with a button's push<br> Electronic Wine Aerator</h2>
            <p class="text-center"><a href="#video" class="btn btn-default btn-lg">Check out Here ! </a></p>
        </div>
    </div>
    <!-- col -->
    <hr>
    <div class="row">
        <div class="col-md-12">
            <img src="img/bigimage2.png" class="img-responsive center-block" alt="tv">
        </div>
    </div>
    <hr>

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <p> &nbsp; </p>
            <p> &nbsp;</p>
            <p> &nbsp; </p>
            <h2 class="text-center">Mixes Wine and Air to provide a optimum Wine flavour and mouthfeel Video</h2>

        </div>
        <p class=""></p>
        <div class="col-md-6">
            <div id="video" class="vid">
                <iframe width="450" height="280" src="https://www.youtube.com/embed/e0mM42ZduTQ" allowfullscreen=""></iframe>
            </div>   <!-- vid -->

        </div>
        <!--.col -->

    </div>
</div>

Answer 1

如果你的页面是这样的，你可以用这个在页面底部导航，你的视频将位于中心：id='anchor' 到你的a 元素

 $("#anchor").click(function() {
      $("#video").animate({ scrollTop: $(document).height() }, "slow");

    });​

Answer 2

它在页面中滚动有点太低的感觉来自导航栏的高度。我会简单地在<hr /> 标签之前选择一个元素作为锚点。 （你的<p>-tags 在这里会派上用场，但请不要使用<p>-tags 作为间隔，让自己成为一个 CSS 类以实现所需的空间效果，然后将你的锚标签放在 <div> 上那个班级）

Answer 3

将 id="anchor" 放置在页面上方的另一个元素上并不是一个非常干净的解决方案。在您的直播网站上，当我点击“查看此处”时，视频的位置仍未“居中”（尽管我仍然可以看到您的视频）。

最终，如果您关心这样的美学，那么依靠锚点放置永远不会好。

其他策略：

1 - 找到一个提供更好布局美感的网站主题。通常这样的主题会使用响应式 CSS 和 Javascript 的组合来分散内容，很好地居中，甚至很好地动画。你会发现很多“一页”主题都具有这些特征。 Here's an example。传统的 HTML 锚链接更适合于轻松导航巨大的文本文档。

2 - 研究将您的视频放置在优雅地出现在整个页面顶部的模式中，页面在背景中变暗。喜欢this tutorial。