I have a big page therefore I cannot paste the whole code here. But the problem is clear and briefly like this: There are animations on the page. On every page refresh, visible area scrolls a bit down. The framework I use is react js. I used below code but it doesn't scroll to top most, it leaves a little space. And on each page refresh the gap increases.
useEffect(()=>{
window.scrollTo({top: 0, left: 0, behavior: 'smooth' })
}, [])
Only hard refreshing the page starts without any gap. Is there a different way to have a try? Any help?
Related
I am using this library to scroll the page at certain points in my app. Everything was working well until I added this line that should happen at the same time as the page scroll.
this.myInput.first.nativeElement.focus()
This caused the focus() to race the page scroll. Since I am giving the page scroll call a pageScrollDuration and the focus() apparently scrolls with a duration of 0, the page jumps to the input instead of smoothly scrolling there.
How do I make sure the page scroll smoothly scrolls to the element while still focusing on it?
The solution I was able to find was to wrap the
this.myInput.first.nativeElement.focus()
with the following:
setTimeout(() => {
this.myInput.first.nativeElement.focus()
}, 0)
This causes the page scroll to happen smoothly.
I'm having a weird issue with page render while using AngularJS and Chrome.
I'm creating a cart icon that only shows when there's at least one element in my cart. The code is:
<a ng-style="{visibility:myCart.checkCartExistence()?'visible':'hidden'}" href="/cart"><span ng-bind="myCart.getCartQty()"></span></a>
Here's the problem:
Top image shows the page as soon as an article is added to the cart.Bottom image shows the same page when you scroll down a bit.
The cart icon and the quantity aren't displayed immediately and only show up when you scroll down the page. The weirdest thing is that if you scroll all the way up, the cart icon disappear again.
The same happens with the title that is set dynamically, when you're at the top of the page it shows TITLE A, if you scroll down a bit it updates to TITLE B. If you scroll up it shows TITLE A again.
Unfortunately I can't post any link to the page so I'm wondering if anyone knows what this is without actually seeing the page.
NOTE THAT:
This happens with Chrome.
I tried with other browsers and it looks like they don't have this issue.
I managed to make it work somehow, clearing the browser cache but it came up again soon after.
I don't know why, but when my page loads, i get scrolled in the middle, but i don't have any anchor aiming on this point...
Now i have to put a <a href='MY-URL#top'></a> anchor in every page for not getting scrolled on the middle...(Firefox don't even get them :0, -webkit browsers do...)
I have many anchor aiming on id's, and a JQuery script for smooth scrolling, but no one for the middle scrolling of pages on load.
You can see that here :
http://www.groupae.be/ediser/2.0/nos_produits.php
What would fire that scrolling on load?
If the page is long enough to have scroll and if you set focus on some element (for example for accessibility features), browser scrolls page in such way that focused element is in the middle of the screen (if scrolls allows to do it, if not it will be scrolled as far as possible).
its ok i found why i was getting scrolled, just the autofocus in the footer form... :/
I'm really new to HTML5 for mobile. I use jQuery Mobile for my current app and I have some problems hiding the navigation bar.
I found this site: http://m.somethingborrowedmovie.warnerbros.com/. (I do not paste this link to promote the movie.)
I was just amazed by this HTML5 site. Does anyone have any idea of the method used to hide the navigation bar?
The menu is also really well done. Is there any framework to build apps like this one?
Try the following:
Add this meta tag in the head of your HTML file:
<meta name="apple-mobile-web-app-capable" content="yes" />
Open your site with Safari on iPhone, and use the bookmark feature to add your site to the home screen.
Go back to home screen and open the bookmarked site. The URL and status bar will be gone.
As long as you only need to work with the iPhone, you should be fine with this solution.
In addition, your sample on the warnerbros.com site uses the Sencha touch framework. You can Google it for more information or check out their demos.
Remy Sharp has a good description of the process in his article "Doing it right: skipping the iPhone url bar":
Making the iPhone hide the url bar is fairly simple, you need run the
following JavaScript: window.scrollTo(0, 1);
However there's the question of when? You have to do this once the
height is correct so that the iPhone can scroll to the first pixel of
the document, otherwise it will try, then the height will load forcing
the url bar back in to view.
You could wait until the images have loaded and the window.onload
event fires, but this doesn't always work, if everything is cached,
the event fires too early and the scrollTo never has a chance to jump.
Here's an example using window.onload: http://jsbin.com/edifu4/4/
I personally use a timer for 1 second - which is enough time on a
mobile device while you wait to render, but long enough that it
doesn't fire too early:
setTimeout(function () { window.scrollTo(0, 1); }, 1000);
However, you only want this to setup if it's an iPhone (or just
mobile) browser, so a sneaky sniff (I don't generally encourage this,
but I'm comfortable with this to prevent "normal" desktop browsers
from jumping one pixel):
/mobile/i.test(navigator.userAgent) && setTimeout(function
() { window.scrollTo(0, 1); }, 1000);
The very last part of this, and this is the part that seems to be
missing from some examples I've seen around the web is this: if the
user specifically linked to a url fragment, i.e. the url has a hash on
it, you don't want to jump. So if I navigate to
http://full-frontal.org/tickets#dayconf - I want the browser to scroll
naturally to the element whose id is dayconf, and not jump to the top
using scrollTo(0, 1):
/mobile/i.test(navigator.userAgent) && !location.hash &&
setTimeout(function () { window.scrollTo(0, 1); }, 1000);
Try this out on an iPhone (or simulator) http://jsbin.com/edifu4/10
and you'll see it will only scroll when you've landed on the page
without a url fragment.
The problem with all of the answers given so far is that on the something borrowed site, the Mac bar remains totally hidden when scrolling up, and the provided answers don't accomplish that.
If you just use scrollTo and then the user later scrolls up, the nav bar is revealed again, so it seems you have to put the whole site inside of a div and force scrolling to happen inside of that div rather than on the body which keeps the nav bar hidden during scrolling in any direction.
You can, however, still reveal the nav bar by touching near the top of the screen on apple devices.
Simple javascript document navigation to "#" will do it.
window.onload = function()
{
document.location.href = "#";
}
This will force the navigation bar to remove itself on load.
On an HTML page, a link like this:
Location on Page
...should navigate to this spot on the page:
<a name="pagelocation">
But in my experience, it sometimes misses - especially when linking from another page (like <a href="somepage.html#pagelocation">). By "misses," I mean it scrolls to the wrong spot on the page - maybe close, maybe not.
Normally, the target location ends up at the top of the screen. I know this can fail if there's not enough room below the anchor to scroll it to the top of the screen.
Why else would it fail? Does it depend on layout at all? How can I fix it?
(I'm keeping this general because I'd like a catch-all reference answer.)
Update 1
Thanks for the pointers so far about non-explicit image sizes. But what about on a page where all the elements have explicit size? (I'm dealing with one now.)
Quite often the scrolling can occur before the page has finished loading. If you have images without widths and heights, the page will jump, then load the image and re-layout itself, making the place you previously jumped to seem wrong.
Edit: Anything else that can change page layout should also be considered with suspicion... this include javascript and CSS that's not loaded in the <head> (never mind that all CSS should be loaded in the head; it isn't always).
If the page is bounced through a redirect, I believe IE will scroll the end page but Firefox won't.
JS Solution
Run this function on document ready.
function goToAnchor() {
hash = document.location.hash;
if (hash !="") {
setTimeout(function() {
if (location.hash) {
window.scrollTo(0, 0);
window.location.href = hash;
}
}, 1);
}
else {
return false;
}
}
I believe the behavior you are seeing is the result of the browser locating to that spot on the page before all images have finished loading. Once the images finish loading, then the layout of the page has changed (the page is likely longer vertically, for example), causing the location of where the anchor should be to have changed - but the browser still thinks it has already navigated to that anchor.
As mentioned above, this is probably due to images being rendered late and 'adjusting' the layout as they load.
If you can specify the size of the images then that much room can be allocated before they render, which should prevent the problem.
As a side note I've had this problem before in the form of using forward/back between enough pages that the images needed reloading, causing me to end up in the wrong place after they had rendered.
I have also seen this happen when JavaScript creates a drop-down menu at the top of a page. Then, once the menu has been finished, it is hidden, scrolling up the content below.
In the meantime, the browser has already set the target location at the top of the window. Hiding the menu a the very top of the page moves the target location up off the top of the window.
Note that you can add id="pagelocation" to just about any HTML element, for the same result, which saves you adding the additional anchors for link destinations.
OK. I think this is new. Using HTML5's autofocus will cause a misfire, as will jQuery's focus() method. Took 90 minutes of trial and error to discover this because I thought the issue was image related :)