Question

我遇到了这个问题，我无法自行解决。

我在这个网站上有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();
        });
});

Answer 1

将课程.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
});

Answer 2

试试这个： 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

如果您能够弄明白，请回复。

css标签不会在页面顶部滚动

2 个答案: