Hi folks!
Everytime I load or refresh my webpage, the page automatically scrolls to the near-bottom. How can I prevent this? Or how can I choose where I want the page to scroll to upon load or refresh? Thanks in advance for your help.
Code Pen link here: https://codepen.io/IDCoder/full/OWbXLw/
Here is the code I have so far:
$(window).on('unload', function() {
$(window).scrollTop(0);
});
@camperextraordinaire, yes, it automatically jumps to the near-end of the page. See screenshots at following links: The 1st link is a screenshot of where the page jumps to when loaded or refreshed. The second link is where I want the page to load by default -the top.
If you commend out the JS codes, you will see there is no jump.
If you note, when your page is loaded, the first textfield of the form is focused, so when you start doing the layout for the figure marquee like, browser will scroll to keep the textfield in render are since it’s focused.
Also line 8 in your JS code, you need to comment it out, it’s about closing ) and } without any opening one.
You may please explain a little about teh part2 you commented in your JS code?!
@NULL_dev, "If you commend out the JS codes, you will see there is no jump…what do you mean? I can’t comment out my js codes, those enable certain functions on the page to operate.
Also, you mention this, “If you note, when your page is loaded, the first textfield of the form is focused, so when you start doing the layout for the figure marquee like, browser will scroll to keep the textfield in render are since it’s focused”. So, that being the case, how do I fix this or change this behavior from occurring? How do I remove the focus from the form and make the top of the page, the focus instead? Thanks in advance for your help.
I know dear, I just wanted to point out, something in the JS code would causes the jump. I’m not telling you don’t use JS< but when you comment the JS and if problem is gone, so it tells you make you sure something JS part should be changed. Just for debugging.
By default, browser doesn’t focus on any element. As I asked you to explain a little about your #part2 section of your JS, so we would find the issue.
Also try to remove the tabindex from your input, and check if it works.
Maybe this could be becasue of bootstrap you added!
Another possible issue could be when an image is trying to load, and it fails, so the bound it could get will be less and causes issues for layout, not sure if it’s works for you or not.
This is really weird, I wish I could help you better. But indeed if I find the issue I will point out.
I also suggest, since you are good about UI, and layouting, start a new page without bootstrap(fact: dependency makes the work more fragile, and more harder to fix issues)
Happy coding.
@NULL_dev, you were correct, in regards to this: “Also try to remove the tabindex from your input, and check if it works.” First I did a check using the “tab” button on the keyboard to see what happened, and then saw that it did the same thing that the browser was doing every time the page loaded or was refreshed!
Also, “part 2” in the javascript comments is describing the second LED(red) lighting function (blinking, glowing, etc.). “Part 1” is describing the first LED (green) lighting function (blinking, glowing, etc.).
" …start a new page without bootstrap(fact: dependency makes the work more fragile, and more harder to fix issues)", in regards to this, this page was the first page that I did with bootstrap to see what it was about. My subsequent projects use C33 grid-technology instead. CSS3-grid is great for creating “mobile-first” responsiveness, and the hottest new CSS technology out. It’s awesome!
Thanks for helping me out man! You pointed me in the right direction!
You got the most important step(first step) very good, this is very good.
You may ready and study about available technologies, frameworks, stuffs… but if you ask me, I would go with plain basic stuffs(like CSS frid you mentioned) over bootstrap.
So happy you could make it, I really haven’t seen such a issue before, so good you got it’s because of tabindex.
Keep going on great work pal, so happy you made it. happy programming.
Really it was the autofocus="autofocus" portion…each section of the form had this feature, so I deleted it all out. The tab-index portion I realized can be left in there…it just makes it possible to skip from one input section to the next in the form, which is a great shortcut for any user really…
