Make named anchor bookmarks appear always at top of the screen when clicked

后端 未结 12 571
耶瑟儿~
耶瑟儿~ 2021-01-03 04:21

I have my markup as follows:

  • Sheds & Housing
  • <
    相关标签:
    12条回答
    • 2021-01-03 05:02

      Here is a more cross-browser and javascript-less solution.

      However, it implies you can use an absolute positioning, hence not very friendly with floats and such :

      #med_vac {
          position: absolute;    
          height: 100%;
      }
      

      Fork of your fiddle demoing this solution :

      http://jsfiddle.net/fFL7x/

      0 讨论(0)
    • 2021-01-03 05:03

      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.

      0 讨论(0)
    • 2021-01-03 05:10

      If you don't mind the sections being reorganized to have the clicked on target moved to the top then this could work http://jsfiddle.net/robx/dKfVL/34/

      I made it so that the chosen section gets put right under that very first "Cattle". Not sure what that is, but seems like it's meant to stay where it is.

      The only viable options I see here are:

      1. Hide them all and show only the clicked (Accordion or tabbed style).
      2. Reorganize by clone, append and removing so that the chosen section gets moved up and pushes down the rest.
      3. Put some ugly large margin at the bottom which is always there (Undesirable for me).
      Hope this helps to point you in a better direction.

      0 讨论(0)
    • 2021-01-03 05:11

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

      Add this to your code:

      <!-- 
        padding div tag goes AFTER #med_vac
        but BEFORE closing tag of #content
      -->
      <div id="lowerPadding"></div>
      
      <!-- script tag goes in <head> -->
      
      <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
      <script type="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;
          });
        });
      
      
        function assureAtTop(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.

      0 讨论(0)
    • 2021-01-03 05:12

      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/

      0 讨论(0)
    • 2021-01-03 05:17

      Here is what i did:

      1. the user scroll down the page.
        nothing unusual happens (there is no change to your page).

      2. 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.

      3. 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 HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      <html>
      
      <head>
          <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
          <script>
          $(document).ready(function() {
              function isScrolledIntoView(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>
      
      <ul class="sub_navi">
          <li><a href="#sheds_housing">Sheds &amp; Housing</a></li>
          <li><a href="#feed_fodder">Feed &amp; Fodder</a></li>
          <li id="gonnaclickhere"><a href="#med_vac">Medication &amp; Vaccination</a></li>
      </ul>
      
      <div id="content">
      
          <div id="content_pic">
          <img src="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>
      
          <div id="sheds_housing">
          <h1>sheds &amp; housing</h1>
          <img src="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>
      
          <div id="feed_fodder">
          <h1>feed &amp; fodder</h1>
          <img src="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>
      
          <div id="med_vac">
          <div id="med_vac_title">
          <h1>medication &amp; vaccination</h1>
          </div>
          <img src="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>
      
      <div id='dummydiv' style="bottom: 0; width: 100%;"></div>
      
      </body>
      
      </html>
      

      Tested with FF13 and IE9.

      0 讨论(0)
    提交回复
    热议问题