0

I am working on a single page site that has a nav bar. When a nav icon is clicked, the view appropriately goes to the target location. However, the nav bar covers part of the desired section. So the goal is to change the target location of the hyperlink. For example, maybe to change it so that it is consistently 20px higher than usual. Is there a way to change the location that an <a> tag will take you?

Edit: I have recently found the answer to my question elsewhere. I will be marking this as a duplicate. I think I didn't find it before because I didn't know what words to use to describe my problem.

frownyface
  • 153
  • 1
  • 8
  • https://www.rapidtables.com/web/html/link/html-anchor-link.html Anchor is what you're looking for. – dnunez32 Nov 27 '19 at 23:18
  • 1
    @dnunez32 Thank you for the speedy response :) however, I don't see quite how this answers my question, as I am using the anchor tag, but the problem is the target location is being cut off and I am looking how to change the resulting view. Unless you typed your answer before I edited in the "" tag. – frownyface Nov 27 '19 at 23:22
  • shouldn't this be solved with css? – Jon B Nov 27 '19 at 23:39
  • @JonB that would be great. Would you know how? I wouldn't want to actually add margins to the elements as that will change how the page itself looks, but if there is a css solution I would love to hear it. Idk how that would work though – frownyface Nov 27 '19 at 23:40
  • It really depends on your application setup but if you are loading some html into a page container in an SPA the loaded page html could have a class that adds margins to the inner container? – Jon B Nov 27 '19 at 23:45
  • 1
    @dnunez32 You were right, the anchor tag was used for the solution I used found here https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header/13184714#13184714. I was thinking of only use the anchor tags for the link, but didn't know you can use them as targets. Thank you. – frownyface Nov 28 '19 at 01:02
  • @frownyface - You're welcome! – dnunez32 Nov 28 '19 at 01:50

1 Answers1

1

You can use jQuery to do that and make a smooth scrolling as well.

$('a[href*="#"]').click(function(){
 $('html, body').animate({
    scrollTop: $( $(this).attr('href') ).offset().top - 20
 }, 500);
return false;

});

Armedin Kuka
  • 665
  • 4
  • 10
  • Thank you! Would it be possible to do this without jQuery? I am just contributing to this site and I wouldn't want them to download a jQuery unless absolutely necessary. – frownyface Nov 27 '19 at 23:23
  • You can also use pure javascript, but that would be a much more work. jQuery is always an amazing library to have tho :)) You can do amazing things with it. – Armedin Kuka Nov 27 '19 at 23:26
  • For sure, would you know what functions I should be using for the javascript solution? You don't have to type out the solution because I think if I know the concept I can find it online. And I agree, jQuery is amazing :) I guess I'm trying to minimize the content I add to the project, but maybe I'll bring it up to them – frownyface Nov 27 '19 at 23:27
  • Sorry, I think I didn't communicate clearly. I was asking for functions in javascript that would move the view of the page with an offset value (unless I din't read your link thoroughly). Thank you for the resources! – frownyface Nov 27 '19 at 23:35
  • I am not sure whether there is are specific functions about that, but you can consider adding a `padding-top:20px` to the sections that the page will jump to when a nav icon is clicked. – Armedin Kuka Nov 27 '19 at 23:42
  • Would that permanently add padding to the sections? Like change the styling of the site even when the nav bar is not being used and the user is just scrolling? – frownyface Nov 27 '19 at 23:43
  • Unfortunately yes. I can't think of a better way currently. Sorry about that. – Armedin Kuka Nov 27 '19 at 23:45
  • It's ok :) no worries, thank you for providing answers. I found a solution that is similar to what you mentioned here https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header/13184714#13184714 Idk if this was what you were thinking. – frownyface Nov 28 '19 at 01:02