CODEWITHSUNDEEP
javascriptjqueryscrolljquery-mobile
sarah3585
sarah3585

Reputation: 637

Jquery mobile scrolling to bottom on new page

I'm having an issue when I click a #link to a new page, it jumps the page to the bottom of the new page. I tried using minScrollBack = 'infinity' which I found in the documentation but no effect. Surely this shouldn't be doing this as default anyway?

**EDIT Example Page. I have set up id="landing" and "link1" as working links. When clicking link1 on the first page (landing) it will load then jump to the bottom (reduce browser window to test)

<div data-role="page" data-theme="a" id="landing">

<div data-role="header">
<div class="home-header"></div>
</div><!-- /header -->
   <div data-role="content" data-theme="a"> 

    <div class="panel">
    <h2>Content</h2>
    <p>content</p>
    <a href="#home-insurance" data-role="button" data-theme="b">Learn more</a></span>
   <a href="#quote" data-role="button"  data-theme="c" class="margin-neg" >1-Min Home Quote</a> </span>
    </div>  


 <a href="#link1" data-role="button" data-theme="a" data-icon="arrow-r" data-iconpos="right">Link1</a> 
 <a href="#link2" data-role="button" data-theme="a" data-icon="arrow-r" data-iconpos="right">Link2</a> 
 <a href="#link3" data-role="button" data-theme="a" data-icon="arrow-r" data-iconpos="right">link3</a> 

</div><!-- /content -->

<div data-role="footer" data-theme="b">
<h4>Call free now</h4>
</div><!-- /footer -->
</div><!-- /page -->


<div data-role="page" data-theme="a" id="link1">

<div data-role="header">
<div class="home-header"></div>
</div><!-- /header -->

<div data-role="content" data-theme="a">    

    <div class="panel">
    <h2>Content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et eros turpis. Vivamus rhoncus neque vel mi vestibulum euismod sagittis neque hendrerit. Pellentesque lacinia, ligula sit amet consectetur condimentum, erat lectus ornare neque, eleifend sollicitudin quam lacus ut nunc. Quisque.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et eros turpis. Vivamus rhoncus neque vel mi vestibulum euismod sagittis neque hendrerit. Pellentesque lacinia, ligula sit amet consectetur condimentum, erat lectus ornare neque, eleifend sollicitudin quam lacus ut nunc. Quisque. </p>
    <a href="#link2" data-role="button" data-theme="b">Learn more</a></span>
   <a href="#link3" data-role="button"  data-theme="c" class="margin-neg" >1-Min Home Quote</a> </span>
    </div>  


 <a href="#landing" data-role="button" data-theme="a" data-icon="arrow-r" data-iconpos="right">Landing</a> 
 <a href="#link2" data-role="button" data-theme="a" data-icon="arrow-r" data-iconpos="right">Link2</a> 
 <a href="#link3" data-role="button" data-theme="a" data-icon="arrow-r" data-iconpos="right">link3</a> 

</div><!-- /content -->

<div data-role="footer" data-theme="b">
<h4>Call free now</h4>
</div><!-- /footer -->

Upvotes: 0

Views: 2246

Answers (4)

user875234
user875234

Reputation:

Also, if you use (ui-bar + ui-grid-n) to customize the header but you DONT use (ui-bar + ui-grid-n) on the footer it will scroll to the bottom. - iPad only. Works fine on the droid.

Upvotes: 0

Eric Baker
Eric Baker

Reputation: 357

I had this same issue, only I did not have an <h4> tag in my footer div. My problem was that I did not have a header div. So I added an empty header div above my content div, and now my page appears scrolled at the top as normal.

Upvotes: 1

Matias Gonzalez
Matias Gonzalez

Reputation: 2940

I had the same issue and I've found that the h4 tag in the footer makes the whole page scroll down to the bottom. Replace it with a p or anything besides a header tag and should go just fine.

Cheers

Matias.

Upvotes: 3

Marek Sebera
Marek Sebera

Reputation: 40681

When you have link in format http://www.somethin.com/sub/address#someid and you open it, it will jump on position of div in page which has id == someid like this:

<div id="someid"> <!-- Its content --> </div>

Be sure, your link isn't pointing to div with proper #id on new page

Upvotes: 1

Related Questions