Jaw*_*wad 5 html javascript css jquery
我的标记如下:
<li><a href="#sheds_housing">Sheds & Housing</a></li>
<div id="sheds_housing">
<h1>sheds & housing</h1>
<img src="images/cattle/sheds_housing.png" width="150" height="150" alt="Sheds & Housing"
title="Sheds & Housing" />
<p>Text here</p>
</div>
创建指向页面一部分的链接,以便在用户单击锚点时,将其带到该部分.
无论如何,我可以确保当用户这样做时,内容始终显示在顶部,而没有任何额外的内容可能存在于链接div上方的文档的正常流程中.
它可以单独用CSS完成,还是我必须使用JS/jQuery,如果是的话是什么代码？
编辑
我以前不清楚; 看到这个小提琴.如果您单击前两个链接,您将进入相应的部分,内容将显示在窗口的顶部,但如果您单击最后一个链接,您将被带到相应的部分,但内容不会出现在窗口的顶部和位于相应部分上方的内容存在.
这是我所做的：
用户向下滚动页面。
没有发生任何异常情况（您的页面没有变化）。
用户点击/使用你的锚点。
该代码在 后创建了一些空白空间#content，因此它可以将所需的部分放置在屏幕顶部。
用户将页面向上滚动到第一个div内部#content（可以是您喜欢的任何点）或点击后退按钮转到页面顶部。
空白区域消失（您的页面恢复正常）。
在这里在线测试： http: //jsfiddle.net/RASG/z3q3s/
或者将此代码另存为 HTML 文件以在您的电脑上进行测试：
<!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 & Housing</a></li>
<li><a href="#feed_fodder">Feed & Fodder</a></li>
<li id="gonnaclickhere"><a href="#med_vac">Medication & 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'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 & manure management systems, making them well known across the country.</p>
<div id="sheds_housing">
<h1>sheds & 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 & 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 & drier environment while also reducing the risk of disease and mortality in the livestock.</p>
</div>
<div id="feed_fodder">
<h1>feed & 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 & overall health. A restricted feeding regime is employed that is balanced &amp; concentrated, containing minerals & vitamins, leading to an improved feed/gain ratio. Fodder & 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 & 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>
使用 FF13 和 IE9 进行测试。