How can I stop anchors link from another page scrolling to correct section then jumping to top? - html

On my WordPress website I have a main navigation containing anchor links that scroll to different sections of the home page (e.g)
About Us
However when the main navigation links are clicked from sub pages (e.g. if the navigation links are clicked from a page like the below)
http://thisismysite.com/contact-us
it successfully goes back to the home page and scrolls to the correct anchor, but it then jumps to the top of the page when the page loads completely.
Any ideas what can fix this?

Related

How to scroll to particular to in a another page

I have given href link for readmore button like this
readmore
in my index.html page. I have used bootstrap3 and there are scroll animation for navbar sections.
Now when I click on that readmore button in my index.html page cursor should animate to about us page and it should have a scroll animation to go for particular DIV. is this can be achievable? Should I provide the whole project here?
Answer is in this user's question smooth scrolling to a div in a different html page

Menu links can be clicked but do not load

This site is on Shopify and the main menu links are not working consistently.
https://www.fisherwallace.com/
No console errors.
Links lower in the page work, but not main menu ones.
Any suggestions on how I can identify the issue?

On small screen, Signle Page AMP-HTML's sidebar menu closing issue

I have created a single page site, when menu items are clicked, the page scroll to anchors defined in page. The menus are working fine on large screen (desktop) and when clicked the page scroll to the section, but on small screen (mobile) AMP sidebar menu doesn't close after tapping on a menu item and if you press the close button, then it doesn't go to the section of page that was selected in the menu.
As found at this issue on Github:
amp-sidebar pops the history when it's canceled so the navigation is canceled
it's a known bug with single page anchor navigation, but:
This should be fixed in the next release
the relative fix branch is now (2016-11-30) under review

how to apply the same menu css to other pages

In this store, if you click on the first two links in the menu, after you scroll down the menu changes: it stays at the top of the visible page with a black background. This way the visitor always have access to the menu.
The squarespace theme I'm using allows this to happen only to these first two pages.
If you enter any other menu link and scroll the page down, you will see that the menu doens't do what it does in the first two pages. If you scroll down, the menu stays at the scrolled part of the page.
I'd like to identify the menu CSS which makes changes it and makes it stay at the top of the page with the black background and apply it to all pages.
I'm having a hard time to identify it using FireBug.
If you need to just identify the stylesheet use "inspect element". Right click and select it.
For CSS to make it stay at the top, I think position:fixed will work.

HTML link within page breaks formatting

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>