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... :/
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 want to go from homepage of cece.indiana.edu/index.html to cece.indiana.edu/request.html#speaker. Even though I have the id="speaker", my request is not redirected to the specific id "speaker". I can only get this to work when I am on the request page already. Why can't I get this simple thing to work? Also, I've searched and found answers but none have fixed the problem.
Relevant code/snippets:
<h2 id="speaker" name="speaker">Request a Speaker</h2>
URL: cece.indiana.edu/request.html#speaker
If I am on cece.indiana.edu/index.html: I will go to
Scroll onto Navigation bar
Scroll under "get involved"
Click on "request a speaker"
Be redirected to the bottom of the request.html page. - this is not what I want to happen!
What I want it to do, but it is not happening: If I am on cece.indiana.edu/index.html (or any page)
Scroll onto Navigation Bar
Scroll under "get involved"
Click on "request a speaker"
Be redirected to the H2 with the id "speaker".
This not working correctly in Chrome or Firefox, but it has worked in Safari when I've tried it. I want it to work on all browsers.
It's the JavaScript on your page. If all JS is disabled it works fine. There is JavaScript code messing with the page load and specifically with scrolling and animation, so it's not surprising that it's interfering. Your JS even has specific references to URLs that do or do not have #anchors in them.
In this case it seems you are being sent to the bottom of the page because the "smooth scrolling" code in your JS isn't taking into account that the page may already be scrolled part way. Some browsers will "remember" where you had scrolled to last time you loaded a page, so particularly if you use the back button and then click the navigation item again, you'll end up scrolled too far.
If you have the ability to change the JS, you can fix this by making sure the smooth scrolling code ends by checking to make sure it's actually in the right spot, maybe after a small delay.
I have a website using enjin.com website builder, and I have a page where you can go to play my game that is a .swf, but its html form, and the game requires mouse scrolling for some features and when I test it, the page also moves up and down, how can I disable mouse scrolling only on that specific page? I want the scroll bar on right of screen to still function as it does regularly though, so users can scroll if they really need to.
You can use this css property:
pointer-events:none
For more detail: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
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.
Okay, so - weird problem. Basically, I've created a PHP slideshow framework for my site which loads a whole new page each time somebody clicks to the next image. For a more "fluid" experience, I made the next/previous picture links load the next page so that the picture is at the top of the window (I put <a name='slide'></a> right above the slideshow image, and I link to that). However, when I do so, the page title disappears behind my banner at the top. They say a picture is worth a thousand words, so observe: This page looks fine, but click to go the next picture (broken page) and the album title (2010-05) disappears. If you remove #slide from the end of the broken page link, it works fine again. Any suggestions on why this is happening, or how to avoid it?
TIA! :)
In the page:
<a name='slide'></a>
...this an in-page bookmark. The #slide on the URL forces the page to scroll to this point.
If you want the page to load with it scrolled to the top every time, drop in this script:
<script type="text/javascript">
window.scrollTo(0,0)
</script>