javascript - Bring an element to top of the page even if the page does not scroll -


Background:

Assume that you have a simple page A logo and title only and a paragraph

  & lt; Img src = "http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png" & gt; & Lt; H1 & gt; Foo Bar & lt; / H1> & Lt; P & gt; ABC12345 & lt; / P & gt;   

It looks like

enter the image < / p> <p> <strong> Question </ strong> </ p> <p> </ p> </ p> <p> <p> </ p> <p> <strong> </ P> </ p> p> How can you bring that title to the top left of the screen and move the focus to the focus until it scrolls open? Open to use any JavaScript library and any CSS framework </ P> <p> <strong> Effort: </ strong> </ p> <ol> <li> Tried to use anchor, but They work only if the page was already a scroll bar and the anchor was out of focus </ li> <li> tried <code> window.scrollTo </ code> but the page must already be scrolled Tried </ li> <li> <code> $ ( But that does not work even when the page does not overflow

expected result: < P> Note:

Please note

To create an overflow In addition & lt; Br / & gt; is not the way to add, it can be done in that way, but this is a very simple solution

Why is it needed?

For this one form for mobile devices, the simple requirement is to take the first field at the top of the page and hide the logo (one they want to see it), so do not care Does not use jQueryMobile for this particular task.

If you want the user to be able to scroll and view the logo, then the logo body should be within the top bounds of the tag, because anything outside that tag will not be viewable. This means that you can not use negative margins or similar offsets. The only way to get this is to scroll the desired location, which is within the top limit of the body tag, you can set the time for a millisecond for this event, but whenever It loads, even then the page will have a 'jump'. Therefore, the reasoning is this: First of all, make sure that there is enough time for the page to scroll to the right place, then scroll there.

  // Change the jQuery selectors accordingly // The minimum height of the page CSS ('Minimum-height', $ (document). Het () + $ ('IMG'). ); $ 100 and more image height should be $ ('body'). // then go to that location at a millisecond gap $ ('html, body'). ({ScrollTop: $ ('img'). Height () + 'px'}, 1);   

Alternatively, you can load the page without the image in the first place, then the top of your form field document You will then be able to create an element at the top and then scroll through the page again. This is a time to do the same thing, though there is a way to do this. And the page will still 'jump', there is no way around it.

Comments

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

jasper reports - How to center align barcode using jasperreports and barcode4j -

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -