I'm developing a site for a local chimney sweeper who has a ton of services to offer. For best UX, we decided to make a list of services at the top of the page with a link to the matching section by div ID i.e. if you click on the 'Relining' service, you would be taken to Relining by way of 'services#relining' in the href.
This works everywhere except for when we got to iOS testing - has anyone else come across this?
Have you tried using an anchor tag for the section you want to link to?
For example: <a name="relining"></a> at beginning of the Relining <div> and linking to it using Relining
Fiddle: http://jsfiddle.net/hopkins_matt/ne6b71hb/
Related
I have been searching for a resolution for my issue but haven't been able to find anything online or in this site that answers in simple terms how to fix this... apologies in advance for the long post, but trying to provide as much background context as possible.
I am a basic Sharepoint 2010 user, updating page content on a company site by using the Sharepoint 2010 tools, and adding some basic HTML coding to modify some of the functionality and formatting.
I don't have access to Sharepoint Designer, and have to be very careful what I do with the coding, so it has to be simple.
I have a "team site" page ( [Page 2] ), and have created some inter-page links from the top of the page to content anchor links further down the page with basic edited HTML code to make it work - I've had to do this because the "Bookmark" function is disabled. Noting that from what I can gather, the site page is a "wiki" page, so that seems to cause some additional limitations.
The inter-page links work, however, I then also wanted to link to those same anchor points from another site page ( [Page 1] ), and that's the problem.
The link from [Page 1] goes to [Page 2 / anchor link], but then immediately scrolls to the top of the page.
I haven't been able to find a simple HTML code that I can add to the Page 2 anchor link to stop it from doing this (ie go to my anchor link, and then stay there!)
This is the HTML coding for both the page-to-page links, and the inter-page links:
From one page to another link
Page 1 link - http://urlname.com/Page2.aspx#ANCHOR
Page 2 anchor link - <a id="ANCHOR" href="/Page2.aspx">ANCHOR</a>
Inter-page link
Page 2 link - <a title="ANCHOR" href="/Page2.aspx#ANCHOR">
(Link tools details - URL: /urlname/Page2.aspx#ANCHOR ; Description: ANCHOR ; Note: Bookmark option not available)
Page 2 anchor link - <a id="ANCHOR" href="/Page2.aspx">ANCHOR</a>
The link from Page 1 to Page 2 correctly goes to the page and anchor point, but then immediately goes to the top of the page.
However the link from Page 2 to the anchor point on the same page works perfectly, and doesn't jump back up to the top.
From what I gather, there's some embedded page coding that causes it to do this, but I haven't been able to find anywhere the correct SIMPLE html coding to override).
Note: I do also have a couple of #TOP links on the page, but removing them doesn't make any difference to this.
I've tried all sorts of suggestions that I've found online to modify the anchor link HTML code to stop it from going back up to the top, but no luck - eg. I've tried different anchor names for the inter-page vs the page-to-page anchors, and I've tried adding #/ and other combinations to both the link and anchor link, but unless I'm doing it wrong, that hasn't worked either.
I've also tried to put the anchor links within a Content Editor webpart but that also makes no difference.
6 hours later.... Any recommendations would be much appreciated, but please remember it needs to be basic and easy to follow :-) Thanks in advance!
6:23 AM (1 hour ago)
Hi, can anybody help to understand how to create Internal links (Anchor Links) in a post? I can't able to find any helpful answer. Feeling very frustrated.
I did exactly what a person said me on the Blogger product forum -
For anchor link:
You can create hyperlink in the HTML mode. Just insert the following code where you want to place an anchor. (you can change archorlinkname to whatever you like)
<a name="anchorlinkname"></a>
For the link within the same post that you want to jump to that anchor, please use this code. (you can also change the word in yellow)
Click here to go to anchorlinkname
But something weird is happening once I am updating my post or going from HTML mode to Compose mode.
Error -
<a href="https://www.blogger.com/blogger.g?blogID=48019486#overview">
I don't know why these https://blogger.com/blogger.g?blogID=48 and https://blogger.com/null gets added automatically. It redirecting me back to the admin post section or to blogger sign in section if I am not Signed In.
My Blog - www.lifewithdata.com
Found the answer here: https://productforums.google.com/forum/#!topic/blogger/5MU_HH5T7rA
you must add the address of the page or post.
only works in the non-dynamic templates.
Peace be upon those who follow guidance, I was able to make internal links within post on blogspot platform by using anchors like below:
sectionName
<a name="sectionName">sectionName</a>
I was using a theme based on Dynamic Views and worked for me, and changed it to other theme and the links still work.
I feel like this should be very basic, I've been searching but can't seem to word it well enough for searches.
currently I have 2 html pages, my first index.html page has a navigation that links to itself throughout the entire site.
Home
Services
Portfolio
Contact
all of these section are on the main page (one page layout)
now I have recently added a secondary html page that is accessed via a button in the portfolio section to see a gallery of photos, easily enough I can get to that page via href="portfolio.html"
equally if i want to get back to my home page I can put in href="index.html"
here comes my troubles... What if I want to not only get to the home page, but I want to get to the Services section that is on the home page?
href="index.html/#services" throws error.
Thank you for your time.
Link should be: Services
anchor should be: <a id="services"> ... </a> (HTML5)
well...you're doing well to get into a specific place in the page you need you define id to your element and pass it with the URL. it'll be much easier to see the code itself and tell you what's wrong. try to check that the element has the right id or that you don't call different elements with the same id so the browser can't decide which element you'd like to go to
I am building a page to bring attention to available parts and accessories for a product line that is otherwise burried in my web site. The parts diagrams and check-out feature is always in the same spot on the main portion of my web site, so I have put the part I need to display in an iFrame, limiting what is viewable. However, there is a single part that continues to display, as it is designed to float to the right side of the display window. Since iFrame is now the display window, this floating button is in the way. The web site I am working on is at the following address.
http://www.snoscoot.com/fcaccessories/hondapowerequipment/test.html
Here's a link to a screenshot pointing out what I need to be able to make disappear: http://i1193.photobucket.com/albums/aa354/pbucket10/buttontohide.jpg
The pages that are going to be displayed in that iFrame always have the "div" class of "newsletter". Is there is a way to block certain a certain div "id" or "class" from being displayed within an iFrame? No worries about me stealing content or copyright enfringement, this is my web site (actually owned by the company I work for; I'm their web/code monkey). Any help would be greatly appreciated; I've been wrestling with this one for a couple days now.
Using javascript, you could use:
function hideID(){
document.getElementById("WhateverIdYouWantToGetRidOf").style.display="none";
}
Within a standard SharePoint publishing site, editing the homepage, entering lots of content and then placing a link to the top of the page using the following anchor link doesn't work:
back to top
Clicking on the link above does nothing. However, other named anchors (such as
<a name="test"></a>
and
work fine.
Has anyone come across this issue before?
<a href="#" /> is not supposed to bring you to the top of the page. It targets the empty fragment and basically neuters the default behavior of the link most of the time.
I suspect your <a name="#" /> solution is relying on an artifact of your browsers, because an anchor named # should be called ## (or more probably #%23) in the href attribute of the link.
Since you have to create an anchor anyway, it might be best to give it a meaningful name like TOP and target it using back to top.
I've gotten around it by placing
<a name="#"></a>
at the top of the page, but it would be good to find out why it doesn't work normally, and if there are any other nicer solutions out there.