css 选项卡不会在页面顶部滚动答案

【问题标题】：css tabs don't scroll in page's topcss 选项卡不会在页面顶部滚动
【发布时间】：2014-09-28 05:51:17
【问题描述】：

我遇到了无法自行解决的问题。

我在这个网站上有类似的 css 标签：http://www.sitepoint.com/css3-tabs-using-target-selector/ 但我在页面顶部有一个固定菜单。因此，当我单击一个选项卡时，html 导航到此菜单下的锚点，内容跳转到顶部。我想滚动页面顶部的内容，我搜索了很多，尝试了 `$('body').scrollTop(0);他们在这个答案中所说的话：Scroll to the top of the page using JavaScript/jQuery? 但没有任何工作。这是我的代码，HTML：

<body class="centered">
        <div id="main-container">
            <!-- header -->
            <div class="col_1_of_1 blue header">
                 <div class="col_1_of_5 menu-icon">
                    <img src="img/menu.png">
                </div>
                <div class="col_3_of_5">
                    <p class="main_title" id="headerTitle"></p>
                </div>
               <div class="col_1_of_5 img-icon">
                    <img src="*">
                </div>
            </div>
            <!-- body -->
            <div class="body" id="list">
                <article class='tabs'>
                <section id='tab1'>
                    <h2><a href='#tab1' id='sayit'>Person1</a></h2>
                      <div class='col_1_of_1'>
                            <img src='img/bike/img.png'>
                    </div>
                    <div class='col_1_of_1'>
                        <p class='fausto_title'>dscdsvdvds</p>
                        <p class='fausto_text'>vdlisvd shvgldk sgvds gvgsd kjbvds  ds uidshiu diui guig uig uig g g gl ffyolg f f h hj lhfh ff yfyufolyf uhyf <p>
                    </div>
                 </section>
                 <section id='tab2'>
                    <h2><a href='#tab2'>John</a></h2>
                      <div class='col_1_of_1'>
                            <img src='img/moto/img2.png'>
                    </div>
                    <div class='col_1_of_1'>
                        <p class='fausto_title'>dcdsdvdvds </p>
                        <p class='fausto_text'>dsvdvdhvihiu ugig piogv hgho ghvh vhvhv hvo vohv hovhjvhjvhvh vhvvhv vhvh vhvhv hv hjvp8ythtuy ty tygt gtg68g 6g 6g 6g tg tr gytrg <p>
                    </div>
                 </section>
            </article>
             </div> <!-- end body -->
        </div>

CSS： tabs.css

/* --- container's width --- */
article.tabs
{
    position: relative;
    display: block;
    width: 100%;
}
article.tabs section
{
    position: absolute;
    top: 1.8em;
    left: 0;
    height: 12em;
    background-color: #ddd;
    z-index: 0;
    width: 100%;
}
article.tabs section .table  {
    display: none;
}

article.tabs section:first-child
{
    z-index: 1;
}
article.tabs section h2
{
    position: absolute;
    font-size: 1em;
    font-weight: normal;
    width: 33%;
    height: 1.8em;
    top: -1.8em;
    padding: 0;
    margin: 0;
    color: #999;
    background-color: #ddd;
    border-top: 1px solid #ddd;
}

article.tabs section:nth-child(2) h2
{
    left: 33%;
}

article.tabs section:nth-child(3) h2
{
    left: 66%;
}

article.tabs section h2 a
{
    display: block;
    width: 100%;
    line-height: 1.8em;
    text-align: center;
    text-decoration: none;
    color: inherit;
    outline: 0 none;
}
/* --- active section --- */
article.tabs section:target,
article.tabs section:target h2
{
    background-color: #fff;
    z-index: 2;
}
article.tabs section:target {
    width: 100%;
    position: absolute;

    top: 1.8em;
    left: 0;
    height: 12em;

}
article.tabs section:target h2 {
    width: 33%;
    border-right: 1px solid rgb(27,47,105);
    border-left: 1px solid rgb(27,47,105);
    border-top: 1px solid rgb(27,47,105);
    color: rgb(27,47,105);
}
article.tabs section:target .table{
    display: block;
}
/* --- transition effect --- */

article.tabs section,
article.tabs section h2
{
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

menu.css：

.menu-icon {
    padding-top: 9% !important;
}
.menu-icon img {
    width: 40%;
}
.header {
    position: fixed;
    height: 64px; 
    top: 0;
    z-index: 1000;
}
.header div {
    float: left;
    padding-top: 8%;
}

感谢任何帮助的建议！

编辑：

这是一个 phonegap 应用程序，我现在正在 iOS 中编译。似乎命令 scrollTop 无法识别。我正在使用 zepto.js，一个类似 jQuery 的库，但速度更快。

编辑 2： Zepto.js / jQuery：

function clickButton()
{
    document.getElementById('sayit').click();
    return true;
}

$(function() {

        //..other code (nothing to do with tabs)

        //simulate the first click on a tab
        clickButton();

        $('a').on('click', function(event){
          var anchor = $(this);
          alert($(anchor.attr('href')).offset().top);
          $('html, body').stop().animate({
              scrollTop: $(anchor.attr('href')).offset().top
          }, 100);       
          event.preventDefault();
        });
});

【问题讨论】：

您使用的是哪种浏览器？
你能分享一下到目前为止尝试过的 jquery/Javascript。
只需编辑我的问题

标签： javascript jquery html css zepto

【解决方案1】：

试试这个： JS：

 //To scroll top of the Tab

 $(function() {
  $('a').bind('click',function(event){
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1000);       
    event.preventDefault();
  });
});

HTML：

<div class="col_1_of_5 img-icon">
   <a  href="#tab1"><img src="*" alt="TOP"/></a>
</div>

另外，我在显示顶部箭头的图像上添加了 Anchor 标记。

DEMO HERE

如果你能弄清楚，请回复。

【讨论】：

试过了，可惜没用。 $(anchor.attr('href')).offset().top 返回值（例如 91），然后什么也没有发生。我正在用我的 jQuery 编辑我的问题
我的选项卡有一个 offset().top 值 91，所以当我执行 scrollTop: 91 时，它会转到锚点，而不是页首。不幸的是，即使我将该值更改为 0，也不会发生任何事情。我到处都设置了警报，所以代码运行了。

【解决方案2】：

将.tab 类添加到您的标签链接。
<h2><a href='#tab1' id='sayit' class='tab'>Person1</a></h2>
在页面的<head> 中包含 jQuery：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

将点击事件绑定到将页面滚动到顶部的选项卡：

$('.tab').click(function(event) {
    event.preventDefault(); //Prevent the link from jumping.

    $('html,body').animate({scrollTop:0}, 400); //Scroll to top
});

【讨论】：

我尝试了这段代码，但没有任何反应。使用警报 $(body).scrollTop() 它会显示一个值 115，这意味着我需要向上滚动 115 个像素，对吗？但是当我设置上面的代码时，正如我所说，没有任何反应。该代码有效，因为我在 scrollTop 上方插入警报。
检查浏览器开发者工具中的控制台标签。可能存在阻止执行 jQuery 代码的 JS 错误。
我不认为，一切正常，我在方法中设置了一个警报并且工作正常，只是没有向上滚动！该死的……