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.
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 always see websites that has a link that says #top or #bottom that takes you to the top or bottom of the page. Can someone please tell me how I can use it on my website. I already tried saying <a href="#top"> or <a href="#bottom"> but it did not work.
This depends on what exactly you would like to be treated as top and bottom. To link to the very start of the page, you can use the URL #, as in Start of page. To link to some specific element near the start, assign an id attribute to it, e.g. <h1 id="top">Main heading</h1>, and use that attribute value in a link, e.g. Start of page.
The bottom is a bit more tricky, since there is no predefined URL for it, and although you can use the id technique, the URL will refer to the start of the element. You could deal with this using an empty element at the very end of document body:
Last piece of real content.
<div id="bottom"></div>
</body>
</html>
Then you would use e.g. End of page.
However, normally links to start of page are worse than useless, and links to end of page are no better. Every browser provides a simple way of getting to the start or to the end of any page.
Hashing with an id will take you to the equivalent element with the id on the page.
So if you have a div like so:
<div id="top"></div>
and an anchor as such:
Go to top div
Clicking the anchor will take you to that divs place in the DOM.
Quite simple if a user is at the bottom of the page show them
Go to the top
Or if they are at the top of the page show them
Go to bottom
Right...
I am working on a client's website and so far most of it is working well.. until today...
The URL: http://www.chris-loweth.co.uk/shoaib-hassan-photography/site_demo_1/
When the page displays it is jumping to a H1 on the page that is half way down the page...
There are a few <a href="#"> links for dummy content but these shouldn't be working like scroll anchors... and there's definitely not an anchor in the div that the browser seems to be scrolling down to...
Spent hours on this and wondered if some fresh eyes might help...
I've tried to validate the markup but as this is a test site some of the div IDs duplicate so validation fails.
Thank you guys n gals!
I don't think it's jumping to the H1. I think it's this line near the top of your tools.js file that is doing it:
$('input[type="text"]:first').focus();
It is scrolling to put this in view, and depending on your browser size, this could well put the H1 above at the top of the window.
The problem is caused by this line in the javascript file:
// Set focus to event title on page load
$('input[type="text"]:first').focus();
The first input field is way down on the page. Setting the focus to it is causing the browser to scroll to the input field instead of remaining at the top of the page.
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.
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.