Using # to jump to location + increment

Along the top of my screen I have a header:

<header class="push"> <div class="inner-wrap"> <a id="logo" href="/Default.aspx"><img src="/images/cianad_new.png" alt="Azi Map" /></a> <div id="accountname1" style="position:relative;float:right"> <div id="divLogin" style="position:relative; margin-right:1px; margin-top:1%; float:right"> <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"> <AnonymousTemplate> </AnonymousTemplate> <LoggedInTemplate>Welcome <span class="bold"><asp:Label id="UserLogonID" runat="server"></asp:Label></span> <br /> [<asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/Account/login.aspx" />] <br /> </LoggedInTemplate> </asp:LoginView> <p style="text-align:right"> <asp:Label ID="lblFreeTrialDays" runat="server" Text=""></asp:Label> </p> </div> <ul id="nav"> <li><a href="#Products" id="btn-products"><img src="/images/btn_layers.png" />Products</a></li> <li><a href="#AboutUs" id="btn-data"><img src="/images/btn_layers.png" />About Us</a></li> <li><a href="#ContactUs" id="btn-maps"><img src="/images/btn_maps.png" />Contact Us</a></li> </ul> <div id="mobile-btn"> <img src="/images/menu_btn.png" alt="Menu Button" /> </div> </div> </div> </header>

Clicking on the Products image will jump to the products div

<div id="Products" style="background-color:red; width:100%;"> </div>

this all works fine but it doesnt allow for the height of the header...meaning that the first 3 lines of text are hidden behind the header so it appears to start on the fourth line. Is it possible to add increment this from say products +20px?

-------------Problems Reply------------

If you add a class 'js-nav-link' to each of your nav item, and a 'header-block' class to your entire header section which you want to reserve space for, then:

var headerHeight = $('.header-block').height();
var contentOffset = headerHeight;

/* This does slow scroll to corresponding section */
$('body').on('click', '.js-nav-link', function(event){
event.preventDefault();
var $toggleHandle = $(this.hash);
var scrollTopValue = $toggleHandle.offset().top - contentOffset;
$('html, body').animate({
scrollTop: scrollTopValue
}, 600);
});

This was a jquery solution, because I also wanted a nice scroll animation for this, and also when I had a fixed to top header section.

Set margin-top and padding-top on the destination to be equal and opposite, based on the top offset that you want.

In this snippet, the distance between the top of the h1 and #dest is 50px, so I use that as the destination's negative margin-top and positive padding-top:

h1 {
margin-top: 90%;
height: 25px;
margin-bottom: 25px;
}

#dest {
margin-top: -50px;
padding-top: 50px;
margin-bottom: 100%;
}

<a href="#dest">Click me</a>

<h1>Header</h1>
<div id="dest">
Destination
</div>

In the past i have the same issue as you. I was wondering what should i do with it and then great idea comes to my head!

We all love hidden elements so i create a hidden span with #SAMPLE and my anchor jump to this element. Additional i position it with relative attribute so i can move it all around!

Here's a sample code , check it out and let me know if it helps you!

JSFiddle

Cheer!

Category:javascript Views:1 Time:2019-02-04

Related post

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.137 (s). 11 q(s)