scrollTop()

[aqr996]

Hi, btw thanks for this great piece of kit. Love it. But one thing that I have noticed is that if have a lot of content on one side, when i swipe to the other tab it doesn't take you to the top, but rather at the same point with respect to the previous slide.

(e.g. if i'm half way down the content of tab-1, swiping causes me it open half way down of tab-2 - it should go to the top)

any ideas how to fix this? using Swipe 1.0

[alicelieutier]

Well.. I guess you should scroll up in the transition callback.

Then how to scroll up depends on how your page works. If the slider is at the top of the page, you can just call scrollTo(0,0). If there is content before the slider, you want to scroll to the top of the slider element. For this you will need to calculate the position of the top of the slider, and scroll to it.

One method for this is:

function getTop(element) {
    var top = element.offsetTop;
    while (element = element.offsetParent) {
        top += element.offsetTop;
    }
    return top;
}

you can then use scrollTo() to scroll to this position...

[aqr996]

thanks but i'm a bit of a novice when it comes to javascript manipulation. where would i insert the code?

thanks but i'm a bit of a novice when it comes to javascript manipulation. where would i insert the code?

// slider var slider = new Swipe(document.getElementById('slider'), { callback: function(e, pos) {

    var i = bullets.length;
    while (i--) {
      bullets[i].className = ' ';
    }
    bullets[pos].className = 'on';

  }
}),
bullets = document.getElementById('position').getElementsByTagName('em'),

// tabs tabs = new Swipe(document.getElementById('recommender-content'), { callback: function(event,index,elem) { setTab(selectors[index]); } }), selectors = document.getElementById('section-selector').children;

for (var i = 0; i < selectors.length; i++) { var elem = selectors[i]; elem.setAttribute('data-tab', i); elem.onclick = function(e) { e.preventDefault(); setTab(this); tabs.slide(parseInt(this.getAttribute('data-tab'),10),300); } }

function setTab(elem) { for (var i = 0; i < selectors.length; i++) { selectors[i].className = selectors[i].className.replace('on',' '); } elem.className += ' on'; }

[alicelieutier]

Is it normal that you have two Swipe on this page?

In any case, a simpler way to do what you want might be this:

// tabs
tabs = new Swipe(document.getElementById('recommender-content'), {
callback: function(event,index,elem) {
setTab(selectors[index]);
window.location.hash = 'recommender-content';
}
}),

This takes you to your tabs slider the way a local link would.

[aqr996]

Thanks, but this fix only works once (i.e. when a user swipes back across and down etc etc swiping back lands him/her back in the same position). Any ideas how to fix?

[maxmarkus]

Use a function which scrolls to the very top:

function bodyScrollTop(){
        $('html, body').animate({
            scrollTop: '0px'
        }, 100);
}

in Swipe you call this function best on end of transition: for Swipe 2.0:

transitionEnd: function(index, elem) {
        bodyScrollTop();
      }

for Swipe 1.0, i dont know if there is a transitionEnd, but if you have a callback func:

callback: function() {
        bodyScrollTop();
      }

If it does not always work (since callback is called during slide, you need to call it later)

setTimeout(bodyScrollTop, 100);

So the call of bodyScrollTop is eventuelly called after transition.

[aqr996]

Thank you so much man. That worked beautifully.

[aqr996]

hi @maxmarkus and @alicelieutier, i have two tabs. when i scroll to tab 2 it goes to the top (which it should :) ) however, is there a way for when i go back to tab 1 to back to the original position -from where i swiped across - (as it takes me to the top)?