I understand but there is no such method/functionality by default. But you can use for example jQuery and its .animate method to animate .page-conten's scrollTop position: --- jQuery('.page-content').animate({scrollTop: someNewPosition}, 300);
This does not seem to work for a list-view I want to open a page of radio buttons with the display about half way down. Tried this: jQuery('.page-content').animate({scrollTop: 's43'}, 300);} Where s43 is the id of the relevant radio button. Any suggestions?? thanks
It should accept scroll position in px, i guess not the id of the element. Anyway there is already native .scrollTop method in F7: --- $$('.page-content').scrollTop(newTopPosition, duration); --- where newTopPosition is the required scroll position in px; For example: --- $$('.page-content').scrollTop($$('#s43').offset().top, 300);
thanks - works perfectly...
Is there a way to add an specific amount of pixel ? Cause if i scroll to the id the top is behind the header. How can i add the 44 px to the scrolling ? tried but it doenst work :/ $$('.page-content').scrollTop($$('#s43').offset().top + 44, 300);
Yes, this parameter accepts number, so you probably should do " -44": --- $$('.page-content').scrollTop($$('#s43').offset().top - 44, 300);
Thank you very much. This runs well, but there is now a second problem, This runs only well for the first choice. I have 4 buttons to switch between 4 divs. If i choose the first the scroller scrolls there without problems. Maybe i choose the third div then then scroller goes nice to this div but if i choose the next e.g. the one before or the next div it scrolls not or only the half. <li><a href="#" onclick="$$('.page-content').scrollTop($$('#div1').offset().top - 100, 500);" class="list-button item-link close-popover">Test 1</a></li> <li><a href="#" onclick="$$('.page-content').scrollTop($$('#div2').offset().top - 100, 500);" class="list-button item-link close-popover">Test 2</a></li> <li><a href="#" onclick="$$('.page-content').scrollTop($$('#div3').offset().top - 100, 500);" class="list-button item-link close-popover">Test 3</a></li> <li><a href="#" onclick="$$('.page-content').scrollTop($$('#div4').offset().top - 100, 500);" class="list-button item-link close-popover">Test 4</a></li> <div class="wrapper-card"> <!-- Ca rd Start --> <div class="card" id="div1"> <div class="card-title">Test 1</div> bla bla bla ..... </div> <!--Card Ende--> </div> <div class="wrapper-card"> <!-- Card Start --> <div class="card" id="div2"> <div class="card-title">Test 2</div> bla bla bla ....... </div> <!--Card Ende-->
I have the same problem. Any solution ?
Please nobody ? I have the same problem http://www.idangero.us/framework7/forum/#!/questions:scroll-to-div/thank-you-very-much-this-r
Is there a way to correctly scroll to certain element? Because it always behind the header and searchbar
I apologise for wasting time, but, I am trying to do this too. That is scroll to a div with an id. I have a list of theese: <a href="#boydcreek" id="scroll"> Then further down there is a div with id=boydcreek. Since there is a long list of them this is what I have in my js $$(document).on('click', 'a#scroll', function (e) { $$('.page-content').scrollTop($$('#boydcreek').offset().top-60, 300); }); which works fine to get me to boydcreek but I need to change the #boydcreek to be the href of whatever people click on so that the js will work for all internal links. I got to this point by considerable trial and error, a kind word of advice would save me some time.
Solved my own problem with this. // Scroll internal links $$(document).on('click', 'a#scroll', function (e) { $('.page-content').scrollTop($(this.getAttribute('href')).offset().t op-60, 300); });