Make Named Anchor Bookmarks Appear Always At Top Of The Screen When Clicked

Question

I have my markup as follows:

sheds & hous

Solution 1:

Add the id "last_anchor" to the last link in your list and this will achieve it with jquery. How and if you decide to change the margin of the body back is up to you...

$(document).ready(function(){
  $("#last_anchor").click(function(){
    var content_id = $(this).attr("href");
    var win_height = $(window).height();
    var content_height = $(content_id).height();
    var target_margin = win_height - content_height;
    $("body").css("margin-bottom", target_margin)
  });
});

Solution 2:

Here is what i did:

the user scroll down the page. nothing unusual happens (there is no change to your page).
the user click/use your anchor. the code creates some empty space after #content, so it can place the desired part on top of the screen.
the user scroll the page up to the first div inside #content (could be any point you like) or hit the back button to go to the top of the page. the empty space disappears (your page is back to normal).

Test online here: http://jsfiddle.net/RASG/z3q3s/

Or save this code as an HTML file to test it on your pc:

<!DOCTYPE HTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><scriptsrc="http://code.jquery.com/jquery.min.js"type="text/javascript"></script><script>
    $(document).ready(function() {
        functionisScrolledIntoView(elem){
            var docViewTop = $(window).scrollTop();
            var docViewBottom = docViewTop + $(window).height();

            var elemTop = $(elem).offset().top;
            var elemBottom = elemTop + $(elem).height();

            return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
        }

        var elem_that_hides_dummydiv = $('#content div:first');
        var elem_that_shows_dummydiv = $('#content div:last');
        $(window).scroll(function() {
            if (isScrolledIntoView(elem_that_hides_dummydiv)) { $('#dummydiv').hide() }
        });
        $('#gonnaclickhere').click(function() {
            $('#dummydiv').css({'height':(elem_that_shows_dummydiv.offset().top)+'px'}).show()
        })
    });
    </script></head><body><ulclass="sub_navi"><li><ahref="#sheds_housing">Sheds &amp; Housing</a></li><li><ahref="#feed_fodder">Feed &amp; Fodder</a></li><liid="gonnaclickhere"><ahref="#med_vac">Medication &amp; Vaccination</a></li></ul><divid="content"><divid="content_pic"><imgsrc="images/cattle/cattle_main.jpg"width="400"height="300"alt="Cattle Main"title="Cattle Main" /></div><p>Pak United Food Services Ltd., (PUFS) has earned a creditable name and become a major player in the animal husbandry market by building upon Pakistan&apos;s large livestock population. Introducing the concept of corporate cattle farming on scientific lines, the conglomerate uses a livestock development policy consisting of innovative strategies and action plans with the intention of bringing about a radical change in the current livestock production system. The cattle farms are established on rich and fertile acres of land and consist of an impressive and mixed herd of cows/buffalos and sheep/goats.</p><p>A hybrid meat breed is developed by crossing the local indigenous breeds which are predominately draught/milch animals with high meat yielding animals from other parts of the world. A herd management system is incorporated to improve record keeping and obtain information for bench marking decisions. The farms employ a state of the art feedlot design involving the integration of the standard components into a fully functional operating system. This consists of housing, feeding, watering, health-care and cattle effluent &amp; manure management systems, making them well known across the country.</p><divid="sheds_housing"><h1>sheds &amp; housing</h1><imgsrc="images/cattle/sheds_housing.png"width="150"height="150"alt="Sheds & Housing"title="Sheds & Housing" /><p>The housing for the animals utilizes a proper lay out for the farm buildings while keeping in view the environment, climate and wind direction. Sheds, pens and paddocks are constructed according to different categories and sex groups besides other infrastructure &amp; allied facilities. All buildings are made airy for the protection of the animals from extreme temperatures and strong winds. Adequate supply of water for drinking and cleaning is made necessary with strict maintenance of hygienic conditions. Ample sunlight and natural ventilation is assured to assist in the reduction of moisture and bacteria, offering a healthier, cleaner &amp; drier environment while also reducing the risk of disease and mortality in the livestock.</p></div><divid="feed_fodder"><h1>feed &amp; fodder</h1><imgsrc="images/cattle/feed_fodder.png"width="150"height="150"alt="Feed & Fodder"title="Feed & Fodder" /><p>The farms are equipped with in-house feed formulation capabilities which produce feed of constant quality and are palatable, nutritious and free from contamination. Feed supplies are made available according to different feed formulae while keeping in view the nutrient value and energy levels. Daily requirements are worked out for each category and class to achieve improved growth &amp; overall health. A restricted feeding regime is employed that is balanced &amp;amp; concentrated, containing minerals &amp; vitamins, leading to an improved feed/gain ratio. Fodder &amp; wheat/rice straws are purchased/contracted from the nearest markets, while treating it with ammonia or urea to improve the quality and gain a marked effect on cattle weight during the fattening period.</p></div><divid="med_vac"><divid="med_vac_title"><h1>medication &amp; vaccination</h1></div><imgsrc="images/cattle/med_vac.png"width="150"height="150"alt="Medication & Vaccination"title="Medication & Vaccination" /><p>Regular vaccination of the whole herd against contagious and infectious diseases are carried out as a prophylactic measure in order to make sure that the animals are free of diseases of digestive, respiratory, urinary, gynecological and obstetrics by a designated veterinarian. A proactive health plan in employed to improve the health, welfare and productivity of the animals. A pre-weaning vaccination program is used with correct, effective and proper vaccines, dewormers, antibiotics and other medications to prime the immune systems of the animals. Furthermore post-weaning vaccination program is used to boost the immune system of the animals and increase the passive protection against common endemic livestock diseases.</p></div></div><divid='dummydiv'style="bottom: 0; width: 100%;"></div></body></html>

Tested with FF13 and IE9.

Solution 3:

the content always shows at the top without any extra content that maybe present in the normal flow of the document above the linked div.

Assuming this means that you want to hide all the sections on the page and just show the section corresponding to the link clicked, what you are looking for is referred to as Accordian, you can find a sample one here.

Solution 4:

The problem is (if I understand correctly!) you are hitting the end of the page. If you extend the margin on the last element or add some content the header will show on top (if there is enough of the page left to be shown).

See fiddle: http://jsfiddle.net/tHXsS/

Solution 5:

Answer :http://jsfiddle.net/AdKy9/2/

Add this to your code:

<!-- 
  padding div tag goes AFTER #med_vac
  but BEFORE closing tag of #content
--><divid="lowerPadding"></div><!-- script tag goes in <head> --><scripttype="text/javascript"src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><scripttype="text/javascript">

  $(document).ready(function() {
    $("a").click(function() {
      var targ = $(this).attr('href');
      var elem = $(targ);
      document.location.href= targ;
      assureAtTop(elem);
      document.location.href= targ;
    });
  });


  functionassureAtTop(inObj) {
    var y = $(inObj).height();
    var z = $("#lowerPadding").height();
    var w = $(window).height();
    while (y+z < w) {
      $("#lowerPadding").append("<br/>");
      z = $("#lowerPadding").height();
    }
  }

</script>

Gets clicked on <a> element, goes to location.
Gets height of target location, padding tag, and window.
Adds <br/> tags to the padding tag until target location is at the top of the window
Note: checks ALL <a> tags because the second or even third target locations might need padding if the window has a large vertical height and/or a large horizontal width. This also could be implemented without jQuery, but using jQuery is just easier and cross-browser.

JavaScript Controls