单击时，命名锚点书签始终显示在屏幕顶部
我的标记如下：
Sheds & Housing sheds & housing
Text here
创建指向页面某一部分的链接，以便在用户单击锚点时，会将他带到该部分。
无论如何，我可以确保当用户这样做时，内容总是显示在顶部，而没有任何额外的内容可能存在于链接div上方的文档的正常流程中。
它可以单独用CSS完成，还是我必须使用JS / jQuery，如果是的话是什么代码？
编辑
我以前不清楚; 看到这个小提琴 。 如果您单击前两个链接，您将进入相应的部分，内容将显示在窗口的顶部，但如果您单击最后一个链接，您将被带到相应的部分，但内容不会出现在窗口的顶部和位于相应部分上方的内容存在。
这是我做的：
-
用户向下滚动页面。
没有什么不寻常的事情发生（你的网页没有变化）。 -
用户单击/使用您的锚点。
代码在#content之后创建一些空格，因此它可以将所需的部分放在屏幕顶部。 -
用户将页面向上滚动到
#content内的第一个div（可能是您喜欢的任何一个点）或点击后退按钮转到页面顶部。
空白区域消失（您的页面恢复正常）。
在线测试： http ： //jsfiddle.net/RASG/z3q3s/
或者将此代码保存为HTML文件，以便在您的电脑上进行测试：
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.
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.
sheds & housing
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.
feed & fodder
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 & 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.
medication & vaccination
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.
用FF13和IE9测试。
将id“last_anchor”添加到列表中的最后一个链接，这将通过jquery实现。 如何以及如果你决定改变身体的边缘取决于你……
$(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) }); });
内容始终显示在顶部，没有任何额外的内容可能出现在链接div上方的文档的正常流程中。
假设这意味着您要隐藏页面上的所有部分，只显示与所单击链接相对应的部分，您要查找的内容称为Accordian，您可以在此处找到示例。
问题是（如果我理解正确的话！）你正在点击页面的末尾。 如果你扩展最后一个元素的边距或添加一些内容，标题将显示在顶部（如果有足够的页面显示）。
见小提琴： http ： //jsfiddle.net/tHXsS/
解决方案： http ： //jsfiddle.net/AdKy9/2/
将其添加到您的代码中：
我解决您问题的初始解决方案类似于上面的@ saurabh：
$('.sub_navi a').click(function() { var theID = $(this).attr('href'); $(theID+':last-child').css('min-height', $(window).height()); })
如果你最终使用jQuery，你可能会考虑的其他事情是突出重点内容 – 同时调整其余内容……
$('.sub_navi a').click(function() { $('#content div').css('opacity',0.5); var theID = $(this).attr('href'); $(theID).css('opacity', 1); })
您将希望使用另一个div包装导航，以便可以将CSS应用于整个导航。 完成后，您可以将标题定位到固定位置。 下一步是通过将页面内容向下移动一些（导航高度）为页面顶部的常量标题腾出空间。为此，将所有内容包装在另一个div （不包括此内容div中的导航并应用一些CSS – margin-top: (height of nav);
#topnav { position: fixed; } #content { margin-top: (height of nav); }
编辑：
好的，我明白了你的意思。 为了实现这一点，你要么设置div的高度，要么在你去锚点的时候使用min-height ，这将是底部的空间，浏览器向下滚动到。
因此，您必须在CSS中将新类定义为元素或项，并为每个div添加一个类
CSS .elementItem { //use height or min height } HTML Content
见JSFiddle： http ： //jsfiddle.net/dKfVL/
首先查看我的解决方案： http ： //jsfiddle.net/dKfVL/4/
上面的解决方案使用JavaScript， 它只在单击链接时动态地为所需的div添加高度。
var fixLink = $(".sub_navi li:last a"); // change this to a/c to your requirement fixLink.click(function(){ var targetDiv = fixLink.attr("href"); //get the ID of div to be fixed $(targetDiv).height($(window).height()); });
这不会消除之后的高度，我没有看到你想这样做的原因。 但是如果你真的想这样做，你可以监视浏览器的滚动事件，如果滚动大于视口高度，那么你可以将目标div的高度设置为auto 。
选项2：
如果你不想使用javascript，你可以使用css的vh单位，它与css中的% unit非常相似，区别在于它相对于view port，它目前只在chrome中工作。
CSS ：
#med_vac { height: 100vh; }
jsfiddle： http ： //jsfiddle.net/dKfVL/5/
注意：这不是跨浏览器
尝试这个小提琴： http ： //jsfiddle.net/dKfVL/9/
我不确定单独使用css是否可行（至少不是跨浏览器）。
我已经使用jQuery来确保#med_vac元素具有足够的高度以确保标题将出现在页面的顶部。 我已经设置了在调整窗口大小时运行的代码，因此它也会响应任何屏幕大小的变化。
希望这可以帮助！
一个更好的（不需要填充div！）
试试这个jsfiddle 。 它非常适合我。
Highlights of this fiddle:
- 不需要填充div
- 仅在单击最后一个链接时更改最后一个包装div的高度
代码如下。
$(document).ready(function(){ //apply height change while clicking on last link only $("ul.sub_navi li a:last").click(function(){ var $targ= $($(this).attr("href")); if($targ.height() < $(window).height()){ $targ.css('min-height', $(window).height()) } }); });
如果你不介意重组的部分让点击的目标移到顶部那么这可以工作http://jsfiddle.net/robx/dKfVL/34/
我做到了这一点，所选择的部分就在第一个“牛”下面。 不知道那是什么，但似乎它意味着保持原样。
我在这里看到的唯一可行的选择是：
- 隐藏它们并仅显示单击的（手风琴或标签式）。
- 通过克隆重新组织，追加和删除，以便所选部分向上移动并推动其余部分。
- 在底部放置一些丑陋的大边缘，这总是存在的（我不喜欢）。
希望这有助于指出你更好的方向。
这是一个更加跨浏览器和无JavaScript的解决方案。
但是，这意味着您可以使用绝对定位，因此对浮点数不太友好，例如：
#med_vac { position: absolute; height: 100%; }
你的小提琴演示这个解决方案：