使命名锚定书签在点击时总是显示在屏幕顶部 [英] Make named anchor bookmarks appear always at top of the screen when clicked

问题描述

我的标记如下：

 < li>< a href =＃sheds_housing> & amp;住房< / a>< / li> 
< div id =sheds_housing> 
< h1> sheds& amp;住房< / h1> 
< img src =images / cattle / sheds_housing.pngwidth =150height =150alt =Sheds& Housing
 title =Sheds& Housing/> ; 
< p>在此处输入文字< / p> 
< / div> 
  

创建指向页面某一部分的链接，以便当用户单击锚点时，

还有，我可以确保当用户这样做时，内容总是显示在顶部，没有任何额外的内容，可能存在于正常

可以单独使用CSS，或者我必须使用JS / jQuery吗？如果是的话，有什么代码？ / p>

EDIT

请参阅此小提琴。如果你点击前两个链接，你会被带到相应的部分，内容将出现在窗口的顶部，但如果你点击最后一个链接，你将被带到相应的部分，但内容不会出现在

解决方案

这里是我做的：

没有任何异常发生（有没有改变你的页面）。

$ c> #content ，因此它可以将所需的部分放在屏幕顶部。

用户将页面滚动到第 div > #content （可以是任何你喜欢的点），或者点击返回按钮转到页面顶部。

空白空间消失

在线测试： http://jsfiddle.net/RASG/z3q3s/

或将此代码另存为HTML文件在您的电脑上测试它：

 <！DOCTYPE HTML PUBLIC -  // W3C // DTD HTML 4.01 Transitional // ENhttp://www.w3.org/TR/html4/loose.dtd\"> 
< html> 
 
< head> 
< script src =http://code.jquery.com/jquery.min.jstype =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 b 
 $ b return（（elemBottom< = docViewBottom）&&（elemTop> = docViewTop））; 
} 
 
 var elem_that_hides_dummydiv = $ 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;住房< / a>< / li> 
< li>< a href =＃feed_fodder> Feed& amp;饲料< / a>< / li> 
< li id =gonnaclickhere>< a href =＃med_vac>药物和amp;疫苗接种< / a>< / li> 
< / ul> 
 
< div id =content> 
 
< div id =content_pic> 
< img src =images / cattle / cattle_main.jpgwidth =400height =300alt =Cattle Maintitle =Cattle Main/> 
< / div> 
 
< p> Pak United食品服务有限公司（PUFS）通过建立在巴基斯坦大量牲畜种群上而获得可信的名称并成为畜牧业市场中的主要参与者。将企业养牛的概念引入科学界，企业集团使用一种由创新战略和行动计划组成的畜牧业发展政策，旨在实现当前畜牧生产系统的彻底改变。牛场建立在丰富和肥沃的土地上，由令人印象深刻和混合的奶牛/水牛和绵羊/山羊组成。< / p> 
< p>杂交肉品种是通过将主要是吃草/奶牛动物的当地本地品种与来自世界其他地方的高产肉动物杂交而开发的。纳入畜群管理系统以改进记录保存并获得台架标记决定的信息。农场采用现有技术的饲养场设计，包括将标准部件集成到完全功能的操作系统中。这包括住房，喂养，浇水，保健和牛的流出物，粪便管理系统，使它们在全国众所周知。< / p> 
 
< div id =sheds_housing> 
< h1> sheds& amp;住房< / h1> 
< img src =images / cattle / sheds_housing.pngwidth =150height =150alt =Sheds& Housingtitle =Sheds& Housing/> 
< p>动物的房屋利用适当的布局为农场建筑物，同时保持环境，气候和风向。棚，围栏和围场根据不同类别和性别群体建造，除了其他基础设施和相关设施。所有建筑物都是通风的，以保护动物免受极端温度和强风。充足的饮用水供应是必要的，严格保持卫生条件。充足的阳光和自然通风有助于减少水分和细菌，提供更健康，更清洁，更干燥的环境，同时还降低了家畜的疾病和死亡率的风险。< / p> 
< / div> 
 
< div id =feed_fodder> 
< h1> feed& amp;饲料< / h1> 
< img src =images / cattle / feed_fodder.pngwidth =150height =150alt =Feed& Foddertitle =Feed& Fodder/> 
< p>农场配备有内部饲料配制能力，其产生恒定质量的饲料，并且是可口的，营养的并且没有污染。饲料供应根据不同的饲料配方提供，同时保持营养价值和能量水平。为每个类别和类别制定每日要求，以实现改善的增长和增长;总体健康。使用受限供给方式，其是平衡的和放大的。浓缩，含矿物质维生素，导致改善的饲料/增益比。饲料& amp;小麦/稻草从最近的市场购买/收缩，同时用氨或尿素处理以改善质量，并且在育肥期期间对牛重量产生显着影响。< / p> 
< / div> 
 
< div id =med_vac> 
< div id =med_vac_title> 
< h1>药物& amp;疫苗接种 
< / div> 
< img src =images / cattle / med_vac.pngwidth =150height =150alt =Medication& Vaccinationtitle =Medication&Vaccination/> 
< p>作为预防措施，对整个畜群进行常规疫苗接种以防止传染性和感染性疾病，以便通过以下方式确保动物没有消化道，呼吸道，泌尿，妇科和产科疾病指定兽医。一个积极的健康计划，用于改善动物的健康，福利和生产力。使用正确，有效和适当的疫苗，驱虫剂，抗生素和其它药物以预先给予断奶前疫苗接种程序以引发动物的免疫系统。此外，断奶后疫苗接种程序用于增强动物的免疫系统，并增加对常见地方性家畜疾病的被动保护。< / p> 
< / div> 
 
< / div> 
 
< div id ='dummydiv'style =bottom：0; width：100％;>< / div> 
 
< / body> 
 
< / html> 
  

使用FF13和IE9测试。

I have my markup as follows:

<li><a href="#sheds_housing">Sheds &amp; Housing</a></li>
<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>Text here</p>
</div>

to create a link to a section of the page so that when users clicks the anchor, it takes him to that section.

Is there anyway I can make sure that when a user does so, 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.

Can it be done with CSS alone or do I have to use JS/jQuery for this, and if yes what code?

EDIT

I was not clear before; See this Fiddle. If you click the first two links, you will be taken to the respective sections and the content will appear at the top of the window but if you click the last link, you will be taken to the respective section but the content will not appear at the top of the window and the content that sits above the respective sections is present.

解决方案

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.

这篇关于使命名锚定书签在点击时总是显示在屏幕顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！