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
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 placed a sticky navigation on my page which should always be visible on front. When you scroll down on page 2 of my site you'll find out that the navigation is placed behind some other buttons.
Could someone please help me with placing it always on the front?
This is the url of page 2 of my site: http://kmnew.kadushimarketing.com/index.php#targetAnchorPage2
Just scroll down and you'll see what I mean.
Solved! I set the z-index to 999999.
I have a layout like this: http://jsfiddle.net/MTWu5/
Centered page, with sticky header. Inside the header there's menu links to anchors in the page. My problem is when I click on them, I want the anchor to scroll just under the header, not behind it.
How could I do this??
First, i'd write the anchor that way.
<a name="anchor" id="anchor"></a>
If you don't use the close tag for the a element, no position style can be applied without missed up everything.
Then i just applied that style
#anchor{position:absolute;margin-top:-100px;}
It seems to works. Your layout is preserved, no margin. That solution works only if you work with fixed height. The margin top is the height of your header.
Hope that is what you were looking for.
Link to example jsfiddle
hai your problem is fixed "The path is: http://jsfiddle.net/MTWu5/2/
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