I am currently using the following code to link to a new location on my document:
<ol>
<li>How to load a file</li>
</ol>
<h3>
<a name="1.1">Loading Page</a></h3>
The code is working fine although the link is not bringing the "Loading Page" section to the TOP of the page. Rather, the 'Loading Page' Section of my document is ending up in the middle of my page. I am not sure how else to explain this, but hopefully someone will understand what it is that I am asking.
Thank you,
Evan
Is your "Loading Page" near the bottom of your page? If so, it's possible that your page isn't tall enough, or rather, doesn't have enough content below "Loading Page", to bring the "Loading Page" section to the very top.
Is the scrollbar at the very bottom of the window after clicking on the link? There may not be enough content after "Loading Page" to allow it to appear at the top of the window.
Testing your code in Safari the "Loading page" element IS jumped to, and so the text is rendered at the top. However, I would advise using the id attribute instead of the name attribute for better cross-browser support.
It could be that there is no more room to scroll like #jason or #josh-rosen says. OR if you're just talking about a small amount of space it could be because your H3 has a lot of top margin. I sometimes put empty a tags slightly above the target content.
Change 1.1 to 1_1
Change <a name="1_1"> to <a id="1_1">
(1.1 wont work < HTML5)
Related
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 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 am doing a lot of work with accessibility and WCAG at the moment but one thing I am trying to get to work well for all users and especially those using keyboard navigation, is a skip to content link.
This sounds simple to do, throw a link to an anchor in the top of the page and people can 'click' it to skip navigation or other largely unimportant content.
The issue is, though, when you 'click' an anchor link using your keyboard and then hit the 'tab' key again, you get taken to the element directly after the 'skip to content' link and not the next element in the main content area. Ie, the anchor you linked to has not received focus.
It seems that this is a common problem, because I am yet to find a site with a 'skip to content' link that has this working correctly. Even the Vision Australia site has this problem.
I was hoping that somebody knew of a technique/hack/library to make this work as it should.
EDIT: I can confirm that this issue occurs in Chrome and Safari, but not Firefox on my mac.
Most browsers scroll down visually to the target of the same-page link, but don't actually place keyboard focus on that link. You can use JavaScript (or JQuery, as in the example below) to give focus to the target:
$("a[href^='#']").not("a[href]='#'").click(function() {
$("#"+$(this).attr("href").slice(1)+"").focus();
});
However, there's a bug in WebKit that prevents even this solution from working in WebKit browsers such as Chrome and Safari. I wrote a blog post on this about a year ago, and several others have built on it:
Terrill Thompson blog post
More from Damon Muma
A JavaScript-only solution by Zegnat
WebKit Bug Report
Chromium Bub Report
You may place an another element just above the content you want to receive the next focus. Then skip to that element and hide that from view using diff ways like, font-size 0 or a p tag with no content etc.
<div class="skip-nav-container">
<a class="skip-to-main-content" href="#mainContent">Skip to main content</a>
</div>
<nav>
<!--skip this content-->
</nav>
<div class="skip-nav-target">
<p class="skip-nav-target-content" id="mainContent"></p>
</div>
<main>
<!--next element in the main content area-->
<!--main content-->
</main>
I'm absolutely stuck here and hoping someone here will have the answer.
ok - The end goal is to be redirected to another page and be placed at the beginning of a certain DIV. I'm using an anchor tag which points to a DIV with an ID attached to it.
My code works for all browsers EXCEPT for Firefox??
Link on page one:
<a href="/home/services#design">
<%= image_tag "Read_More_Button.png", :alt => "", :style =>
"position:relative; left:-10px"%>
-close a tag
Div with content on page 2:
<div id='design' class='left clear_right '>
more <div>'s nested and a unordered list. black as well.
-close div tag
The route in my config/routes.rb:
get "home/services" => "home#services"
To see how this is currently working please see online version link:
[website_link] http://mearsinteriors.co.uk/ "click here for website"
Click on the "read more" button for Design or fitout and you'll see that you aren't taken to the top of either div but the route/url in the address bar is correctly pointing to this location? This only happens in Firefox, I have tried in safe mode and disabled all add ons and still nothing.
any adice or direction would be greatly appreciated. thanks
This was the Jquery cycle library I was using. Each image's container was still being spaced out over the page. so even though the images weren't visible the divs were still there. Hence the reason the page scroll to the exact position no mater the anchor being directed to.