I have this anchor element:
<a href="mindex.html#clickableAnchor?showhide=1" id="clickableAnchor">
<!-- some content -->
</a>
I need to pass all three elements in href attribute:
- URI mindex.html
- ID #clickableAnchor
- GET parameter showhide
URI is for reloading the page,
ID is for scrolling the page to anchor,
GET parameter is sent for php script which decides either to show or hide a menu placed just under the anchor.
Page is reloading, menu is showing/hiding but the window is not scrolling to #clickableAnchor.
I resolved the problem using jQuery (by toggling the menu) but I want this feature working ALSO without javascript.
What should I do?
The anchor part of a URL comes after the query string. See Wikipedia: http://en.wikipedia.org/wiki/Url
Note that the browser won't scroll to the anchor if there is no scrollbar - if the page contents fit in the browser window, it can't scroll anywhere.
Related
I'm using a HTML anchor tag for a "back to top" link in the footer of my web page:
Back to top
At the top of the page I inserted another anchor tag in <HEAD>:
<a id="#top"></a>
Clicking on the footer anchor link causes the page to scroll up as intended, but is there a way to simply scroll to top (using HTML) without refreshing the page?
For context, search results are being displayed so when the page refreshes, the results are lost.
I found a possible solution using Javascript (see below - it scrolls to top without refreshing the page) but this causes other issues for me (search input field becomes frozen and user cannot enter more terms), so I'm asking whether there's a solution using HTML:
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "fast");
return false;
});
If you want to scroll to top of the page(your div is on top)
You can use below Javascript syntax to achieve this.
window.scrollto(0,0) // (0,0) being the location
I am unsure what is going. I have two footers. One footer is a sidebar, and my other footer is a regular footer on the bottom of the page. My anchor tag in my bottom footer, that links to my about page, takes me to the bottom of the page instead of starting at the top, and my anchor tag in my sidebar footer takes me to the middle of the page! Other Anchor Links are taking me also to the middle or random parts of the pages when loaded.
I am not using anything special with the anchor. I don't think...
Here is my anchor for both footers:
<a href="/about" class="a-color">
<small>About</small>
</a>
My pages are loaded with ng-view. I am not using $anchorScroll
ngView retains the scroll position when you navigate from one page to another. once view loaded then can use $anchorScroll to change viewport or can add autoscroll="true" to ng-view element
<div class="ng-view" autoscroll="true"></div>
Use this code. It will always takes page to top on window load.
$(window).load(function(){
if (location.hash) {
setTimeout(function() {
window.scrollTo(0, 0);
}, 1);
}
});
Seemingly, your browser has an issue. 1. Which browser you are facing this on? 2. Did you try on any other browser? 3. Is this code running fine on any other machine?4. Did you clear cache/cookies and tried again?
Workaround:
Definitely not the perfect solution but as a workaround, try the below code and see if this works out for you:
<a href="/about#top" class="a-color">
<small>About</small>
</a>
as per my understanding you don't want page to reload after user clicks on any link on your page, you only want some area should get refreshed right ?
In that case you can use templates, configure route according to states and by click on link you can change template by $state.go.
I have a menu made from Wordpress that serves as my site's navigation. Every main item in this menu is a Page Type (redirects to other existing pages) with one of them having submenus that are custom links.
These custom links' URLs are div IDs from the its parent page. This is how it's structured.
About Us
Who we are
What we do
How we do
So the submenus URLs are #who-we-are, #what-we-do, and #how-we-do which are sections from the About Us page. Now my problem is that when I am in the About Us page, the submenus links works properly. It scrolls up/down to the section it should. But when I am in another page (let's say Homepage), it doesn't redirect to it as it can't find any section in the page with that div.
Any ideas on what I should put on the URLs instead? Thanks in advance.
To get it to work, you have to attach the id tags to the url (otherwise it is treated as a relative link).
Example:
A main page: http://yourdomain.com/page1
Section URL: http://yourdomain.com/page1#who-we-are
Suppose your about us page url is "www.yoursite.com/about-us".
Then to jump directly into a section of this page from external page you need to put anchor tag like this
<a href='http://www.yoursite.com/about-us#who-we-are'/>
so you should give url "http://www.yoursite.com/about-us#who-we-are" for your custom link not only "#who-we-are".
click link and see address bar
Wordpress submenu link to a section of page
For this you have to attach the ids with the links of pages from which you want to get redirect to particular section.
Example: Let say your home page be http://www.yourdomain.com/
Now pass the id with this as : http://www.yourdomain.com/about-us/#who-we-are
http://www.yourdomain.com/about-us/#what-we-do
These should be the ids of the div's on about-us page.
I have markup like this on somepage.html:
<div class='someclass' id='hashtag1'>
<h1>somecontent</h1>
</div>
<div class='someclass' id='hashtag2'>
<h1>somecontent</h1>
</div>
<div class='someclass' id='hashtag3'>
<h1>somecontent</h1>
</div>
And links like this on another page (let's call it someotherpage.html):
<a href='somepage.html#hashtag1'>first content div</a>
<a href='somepage.html#hashtag2'>second content div</a>
<a href='somepage.html#hashtag3'>third content div</a>
However when I click on one of these links I don't see the expected behaviour - the page loads as normal but the scrollTop of the window doesn't match these divs. I've tried changing the IDs as they had hyphens in the to start with, this didn't make any difference - I've also tried changing what element the ID is on, i.e changed the <h1> to have the ID, then changed the <h1> to an anchor, but no luck.
When I'm already on the page, if I edit the hasthag and hit enter, it works as expected - changing the scrolltop of the window to the element with the ID of the hashtag without refreshing the page - but it doesn't work on the first hit.
Am I missing something obvious here?
EDIT:
Using FF 9.0.1 on Mac OSX
Turned JS off using web developer toolbar
changing or removing CSS doesn't seem to make any difference
UPDATE:
This works fine if I enable javascript - which is exactly when it doesn't need to work.
I have this as a catch for users with no javascript / disabled js. WTF, firefox?
Given your specific example, it seems to me that the scrollTop only changes when the page is already long enough to require scrolling.
When all the content is in view, the scrollTop position remains at the top of the document however when the page requires some scrolling, the scrollTop scrolls as far as the document can already scroll.
If scrolling to the required ID does not exceed the total possible scroll position, then the element in question will apear at the top of the page, otherwise the document will only scroll to it's maximum (based on its content).
Hashtags don't work with ids. You have to put a tags like this: <a name="foo"></a>. Then you can link to them using go to foo. Same goes for linking between multiple pages.
I'm trying to link to an element on the same page like this
Link
...
<div id="myelement">...</div>
But the browser keeps prepending the full domain to the link and it ends up linking to
http://example.com/#myelement
causing it to reload the page instead of moving to an element on the page. How do I get it to just link to #myelement?
The problem is the <base href="http://hecotravel.com/"> element, which dictates that all links are relative to http://hecotravel.com/. Therefore a link to #traveler is a link to http://hecotravel.com/#traveler, which is a different page than http://hecotravel.com/request.
Either remove the <base> element or link to request#traveler.