css tabs don't scroll in page's top

Question

I've got this issue that i can't resolve myself.

I've got css tabs like in this site: http://www.sitepoint.com/css3-tabs-using-target-selector/ but i've got a fixed menu in the top of the page. So, when i click in one tab, the html navigate to the anchor that is under this menu and the content jump to top. I want to scroll the content on top of the page, I've searched a lot, tried `$('body').scrollTop(0); what they said in this answer: Scroll to the top of the page using JavaScript/jQuery? but nothing work. This is my code, 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%;
}

Thanks in advice for any help!

EDIT:

This is a phonegap application and i'm compling in iOS just now. It seems like the command scrollTop isn't recognize. I'm using zepto.js, a jQuery like library but much faster.

EDIT 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();
        });
});

Which browser are you using? – SoEnLion Aug 05 '14 at 14:18 — SoEnLion, Aug 05 '14 at 14:18
Can you please share jquery/Javascript tried so far. – byJeevan Aug 05 '14 at 14:25 — byJeevan, Aug 05 '14 at 14:25

score 0 · Answer 1 · answered Aug 05 '14 at 14:29

0

Add the class .tab to your tab links.
<h2><a href='#tab1' id='sayit' class='tab'>Person1</a></h2>
Include jQuery in the <head> of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Bind a click event to tabs that scrolls the page to the top:

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

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

answered Aug 05 '14 at 14:29

Axel

10,732
2
30
43

I tried this code but nothing happens. Using an alert $(body).scrollTop() it visualizes a value 115, that means i need to scroll 115 pixel up, right? but when i set the code above, as i said, nothing happens. The code works because i insert alert the row above the scrollTop. – BlackShawarna Aug 05 '14 at 14:34
Check your console tab in your browser's developer tools. There might be a JS error preventing the execution of the jQuery code. – Axel Aug 05 '14 at 15:19
i don't think, everything works, i put an alert inside the method and works, just didin't scroll up! damn it... – BlackShawarna Aug 05 '14 at 15:25

score 0 · Answer 2 · answered Aug 05 '14 at 14:40

0

Try this : 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>

Also, I added Anchor tag over the image which shows the Top arrow.

DEMO HERE

Kindly reply if your are able to figure it out.

answered Aug 05 '14 at 14:40

byJeevan

3,728
3
37
60

Tried it, but unfortunately it doesn't work. $(anchor.attr('href')).offset().top returns me the value (91 e.g) but then nothing happens. I'm editing my question with my jQuery – BlackShawarna Aug 05 '14 at 15:14
My tab has a offset().top value 91, so when i execute scrollTop: 91 it goes to the anchor, not to the head of the page. Unfortunately, even if i change that value with 0, nothin happens. and i putted alarm everywheere, so the code runs. – BlackShawarna Aug 05 '14 at 15:50

css tabs don't scroll in page's top

2 Answers2