Javascript 单击时引导面包屑进入中心俯冲_Javascript_Jquery_Css_Twitter Bootstrap_Breadcrumbs

Javascript 单击时引导面包屑进入中心俯冲

javascript jquery css twitter-bootstrap

Javascript 单击时引导面包屑进入中心俯冲,javascript,jquery,css,twitter-bootstrap,breadcrumbs,Javascript,Jquery,Css,Twitter Bootstrap,Breadcrumbs,我设置了一个站点地图页面，并在顶部使用面包屑将用户直接带到他们想要的位置，因为它有点长。然而，当他们点击面包屑时，面包屑进入正确的div，而面包屑进入较低的div 这是我的密码 <div class="container" style="border: 1px solid black;"> <div class="row" style="border: 1px solid black; background-color: #3a5d85; ">

我设置了一个站点地图页面，并在顶部使用面包屑将用户直接带到他们想要的位置，因为它有点长。然而，当他们点击面包屑时，面包屑进入正确的div，而面包屑进入较低的div

这是我的密码

<div class="container" style="border: 1px solid black;">
    <div class="row" style="border: 1px solid black; background-color: #3a5d85; ">
            <h3 style="text-align: center; font-size: 40px;"><b>Site Map</b></h3>

        <ul class="breadcrumb" style="font-size: 18px;">
            <li class="actve"><a href="#Company">Company</a>

            </li>
            <li><a href="#Resources">Resources</a>

            </li>
            <li><a href="#Signs">Signs</a>

            </li>
            <li><a href="#Magnets">Magnets</a>

            </li>
            <li><a href="#Banners">Banners</a>

            </li>
            <li><a href="#Stickers">Stickers & Decals</a>

            </li>
            <li><a href="#Yard">Yard Signs</a>

            </li>
            <li><a href="#Business">Business Signs</a>

            </li>
            <li><a href="#Social">Social</a>

            </li>
        </ul>
    </div>
    <div id="Company">
        <ul>
            <!--Company-->
                <h3>Company</h3>

            <li>About</li>
            <li>Services</li>
            <li>Contact Us</li>
        </ul>
        <!--End Company-->
    </div>
    <div id="Resources">
        <ul id="Resources">
            <!--Resources-->
                <h3>Resources</h3>

            <li>FAQ</li>
            <li>Terms of Sale</li>
            <li>Terms of Service</li>
            <li>Privacy Policy</li>
        </ul>
        <!--End Resources-->
    </div>
    <div id="Signs">
        <ul id="Signs">
            <!--Signs-->
                <h3>Signs</h3>

            <li>Real Estate</li>
            <li>Art Prints</li>
            <li>Street Signs</li>
            <li>Political Signs</li>
            <li>Property Signs</li>
            <li>For Sale Signs</li>
            <li>Safety Signs</li>
            <li>Traffic Signs</li>
            <li>Novelty License Plates</li>
            <li>Oversized Checks</li>
        </ul>
        <!--End Signs-->
    </div>
    <div id="Magnets">
        <ul id="Magnets">
            <!--Magnets-->
                <h3>Magnets</h3>

            <li>General Magnets</li>
            <ul>
                <li>Events</li>
                <li>Restaurants</li>
                <li>Business</li>
                <li>Services</li>
                <li>Political</li>
                <li>General</li>
            </ul>
            <li>Car Magnets</li>
            <ul>
                <li>Events</li>
                <li>Restaurants</li>
                <li>Business</li>
                <li>Services</li>
                <li>Political</li>
                <li>General</li>
            </ul>
            <li>Fridge Magnets</li>
            <ul>
                <li>Promotional</li>
                <li>Calendar</li>
                <li>Reminder</li>
            </ul>
        </ul>
        <!--End Magnets-->
    </div>
    <div id="Banners">
        <ul id="Banners">
            <!--Banners-->
                <h3>Banners</h3>

            <li>Custom Vinyl Banners</li>
            <ul>
                <li>Events</li>
                <li>Birthdays</li>
                <li>Sports</li>
                <li>Schools</li>
                <li>Organizations</li>
                <li>Real Estate</li>
                <li>Religous</li>
                <li>Holidays</li>
                <li>Political</li>
            </ul>
            <li>General Banners</li>
            <ul>
                <li>Events</li>
                <li>Birthdays</li>
                <li>Sports</li>
                <li>Schools</li>
                <li>Organizations</li>
                <li>Real Estate</li>
                <li>Religous</li>
                <li>Holidays</li>
                <li>Political</li>
            </ul>
        </ul>
        <!--End Banners-->
    </div>
    <div id="Stickers">
        <ul id="Stickers">
            <!--Stickers & Decals-->
                <h3>Stickers & Decals</h3>

            <li>Digital Print Decals</li>
            <ul>
                <li>School</li>
                <li>Car Clubs</li>
                <li>Sports</li>
                <li>Political</li>
                <li>"I Heart" Pictures</li>
                <li>Religous</li>
            </ul>
            <li>Vinyl lettering</li>
            <ul>
                <li>School</li>
                <li>Car Clubs</li>
                <li>Sports</li>
                <li>Political</li>
                <li>"I Heart" Pictures</li>
                <li>Religous</li>
            </ul>
            <li>Window Decals</li>
            <ul>
                <li>School</li>
                <li>Car Clubs</li>
                <li>Sports</li>
                <li>Political</li>
                <li>"I Heart" Pictures</li>
                <li>Religous</li>
            </ul>
            <li>Bumper Stickers</li>
            <ul>
                <li>School</li>
                <li>Car Clubs</li>
                <li>Sports</li>
                <li>Political</li>
                <li>"I Heart" Pictures</li>
                <li>Religous</li>
            </ul>
            <li>Store Front Decals</li>
            <ul>
                <li>Store Hours</li>
                <li>Legal Info</li>
                <li>Social Media Decals</li>
            </ul>
        </ul>
        <!--End Stickers & Decals-->
    </div>
    <div id="Yard">
        <ul id="Yard">
            <!--Yard Signs-->
                <h3>Yard Signs</h3>

            <li>Now Open</li>
            <li>Political</li>
            <li>For Sale</li>
            <li>Business</li>
            <li>Promotional</li>
            <li>Events</li>
            <li>Parking</li>
        </ul>
        <!--End yard Signs-->
    </div>
    <div id="Business">
        <ul id="Business">
            <!--Business Signs-->
                <h3>Business Signs</h3>

            <li>Business Signs</li>
        </ul>
        <!--End Business Signs-->
    </div>
    <div id="Social">
        <ul id="Social">
            <!--Social-->
                <h3>Social Media</h3>

            <li>Facebook</li>
            <li>Twitter</li>
            <li>Instagram</li>
        </ul>
        <!--End Social-->
    </div>
</div>
</div>


站点地图





















单位
关于
服务
联系我们


资源
常见问题
销售条款
服务条款
隐私政策


标志
房地产
艺术版画
路标
政治迹象
物业标志
待售标志
安全标志
交通标志
新颖车牌
超大支票


磁铁
一般磁铁

事件
餐馆
生意
服务
政治的
一般的

汽车磁铁

事件
餐馆
生意
服务
政治的
一般的

冰箱磁铁

推广
历法
提醒



横幅
定制乙烯基横幅

事件
生日
运动
学校
组织机构
房地产
遗物
假日
政治的

一般横幅

事件
生日
运动
学校
组织机构
房地产
遗物
假日
政治的



贴纸和贴花
数码印花贴花

学校
汽车俱乐部
运动
政治的
“我的心”图片
遗物

乙烯基刻字

学校
汽车俱乐部
运动
政治的
“我的心”图片
遗物

窗户贴花

学校
汽车俱乐部
运动
政治的
“我的心”图片
遗物

保险杠贴纸

学校
汽车俱乐部
运动
政治的
“我的心”图片
遗物

商店正面贴花

营业时间
法律信息
社交媒体贴花



庭院标志
现在开始
政治的
出售
生意
推广
事件
停车场


商业标志
商业标志


社会化媒体
脸谱网
推特
Instagram

我可以使用完全相同的代码让它在JSFIDLE中工作

在我的网站上

正如您在我的工作网页上看到的，它将经过页眉几行？

因为您有一个固定的页眉，您需要对页眉高度的元素进行

填充，并对元素进行相同高度的负边距
，以抵消固定的页眉高度。创建一个名为.fake margin
的类，将id
链接用于href=“#{idlink}”
的元素，并给出以下CSS：
.fake-margin {
  margin-top: -72px; /* Header height + margin */
  padding-top: 72px; /* Header height + margin */
}

现在添加这个类fake marg
<div id="Company" class="fake-margin">
<div id="Resources" class="fake-margin">
<div id="Signs" class="fake-margin">
<div id="Magnets" class="fake-margin">
<div id="Banners" class="fake-margin">