http://joshhornby.co.uk/skinnybeer/index.html
As you can see when you click on 'The Booze' in scrolls down to the first item in the container not the area where the div is.
The nav html is
<li>The Booze</li>
and linking to a div id called booze.
<div id="booze">
It seems to be linking to the image or the container and I am not sure how to make it scroll to the header not the image.
It is linking to #booze, you just have a position: fixed element covering it up.
Related
When I create a relative link in HTML, Bot Workshops it links properly, but places the anchor at the top of the page, covered by a navigation bar. Is there a way to make it be lower so that the anchor is underneath the navbar?
If I understand it correctly, when the user clicked Bot Workshops, it should go underneath the navbar.
In your navbar, add an id. For example:
<div id="bot"></div>
Maybe you need to change the display of the anchor link.
a {
display: block;
...
}
You should add a padding-top to the #bot div (approx the height of the navbar plus some space). (This is based on some assumptions below)
I think your navbar is fixed?
If that is the case, the top of the #bot anchor div will be on the top-edge of the browser viewport. But the navbar will be obfuscating some of that content underneath.
This is more of a css/styling issue.
If you do add a padding-top, you might also want to make sure that value is responsive.
I have a fixed header in the top of my page and also I used anchors in angularjs. My problem is when I clicked anchor 1 the div jump in the top of the page and I cannot see it. The anchor is behind of the fixed header which should not.
How can I fixed this one. Thanks in advance.
I am currently referring to this plunker: http://plnkr.co/edit/0ZqAWjHZbTJCtlDL2qpu?p=preview
I took a 1 page parallax scrolling template but I added more pages so it's not just a 1 page site anymore.
I figured out how to jump to the html anchors on the home page when your on a separate page. But now I have an offset issue that I just can't figure out.
The page is https://zoopyo.com - just click pricing or features and you'll see that the title gets cut off. The scroll just needs to be about 90px up. Which is the size of the sticky header. If the sticky header wasn't there it would be fine. So I just need to figure out how to offset it by 90px from the anchor. If that is even possible?
I can't seem to load the website but from what I understand, the navbar is covering some content on top.
my suggestion would be to make an empty/dummy div at the top of the page with the same height as your navbar, then set your to the dummy div, while maintaining the label of the first real div.
something like this:
<li>top</li>
where dummy is empty and set to the height of your navbar
see this jsfiddle I made, the "hello world" is not covered by the navbar
http://jsfiddle.net/49AtS/1/
On the following website, www.josecvega.com, I have a navigation bar with years that link to sections on that same page. Unfortunately it is not working they way I hoped, when the user selects a year it moves to the section of the page and puts that section on the top of the page, I have a fixed div on the top of the page that covers the sections and prevents it from properly displaying. What can I do for this to work?
It hard to explain my situation, but it can be seen by going to www.josecvega.com and clicking one of the years.
Put your anchors earlier in the file. Perhaps use a fixed-height element (the same height as your header) in the margin just before each section and apply the anchor to that.
Or use a script run after the jump and scroll back down X pixels.
Or use a frameset to display the fixed header rather than the position:fixed div you are using now.
I would probably do the latter.
your header (class=bannercontainer") is position:fixed
so this element will not scroll.
if you now click on a year it scrolls the page behind the header.
probably position:fixed is not what you want
I am using ScrollTo and LocalScroll on my single page site, which scrolls in all directions. I have four large divs inside a wrapper, two on top and two below those. Each div is a 'page' of the site.
Onload, the page goes to the 'home' div anchor, at the bottom left of the window/page. My issue is that anytime I try to scroll horizontally from one of the bottom divs to another via my floating nav box, it flashes the content from the div above it before scrolling to the correct linked div.
There is no 'flicker' or 'flash' of any content when the scrolling originates from a top div.
Any help is very much appreciated!
It took some time and tons of Googling but I finally figured this out.
Comment from: Freelancer ID [Member]
I think i've got the problem..
If you put # in the HREF attribute of the A tag, then the window will go up on click to go the ID (which is nothing)
To fix this, Please try to use the following:
- Put "javascript:;" in the HREF attribute of the A tag.
- Or use DIV, SPAN... etc with cursor:pointer css style and onclick event.
This will fix it.
Source: http://blog.freelancer-id.com/index.php/2009/03/26/scroll-window-smoothly-in-jquery