framework7

Open full view…

Scroll to DIV

Brian Ceccato
Wed, 25 Jun 2014 15:06:18 GMT

Hi, my first time here. I have an App witch has an list with links to parts of an bigger Article. The Article is on an different page, so the links are like <a href="page.html#1"> and in the article theres a div with the id 1. What would be the easyest solution to link and scroll to the right part of the article? (I hope you understand, sorry for my english) Brian From Switzerland

Vladimir Kharlampidi
Wed, 25 Jun 2014 16:40:30 GMT

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);

jmaynard
Fri, 15 Aug 2014 15:38:58 GMT

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

Vladimir Kharlampidi
Fri, 15 Aug 2014 16:43:16 GMT

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);

jmaynard
Sat, 16 Aug 2014 09:08:47 GMT

thanks - works perfectly...

morgan1984
Wed, 20 Aug 2014 08:29:22 GMT

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);

Vladimir Kharlampidi
Wed, 20 Aug 2014 09:15:02 GMT

Yes, this parameter accepts number, so you probably should do " -44": --- $$('.page-content').scrollTop($$('#s43').offset().top - 44, 300);

morgan1984
Wed, 20 Aug 2014 10:14:41 GMT

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-->

Dvorah
Fri, 15 Jan 2016 14:12:56 GMT

I have the same problem. Any solution ?

Dvorah
Sun, 17 Jan 2016 15:40:21 GMT

Please nobody ? I have the same problem http://www.idangero.us/framework7/forum/#!/questions:scroll-to-div/thank-you-very-much-this-r

angelo
Thu, 16 Feb 2017 03:58:40 GMT

Is there a way to correctly scroll to certain element? Because it always behind the header and searchbar

quietlight
Mon, 08 May 2017 23:12:31 GMT

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.

quietlight
Mon, 08 May 2017 23:52:09 GMT

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