jquery实现点击跳转到相应位置

这篇博客详细介绍了如何利用jQuery实现页面上的元素点击后,页面自动滚动到相应位置。内容包括CSS样式设置,HTML结构布局,以及关键的jQuery JavaScript代码实现。
摘要由CSDN通过智能技术生成

CSS部分

<style>
body {
    background: #F1F1F1;
}
.wrapper{
    width: 1200px;
}
.duoxuanti {
    color: #4D76E0;
}

.blue-bg {
    background-color: #4C76E2;
    color: #fff;
    border-radius: 3px;
}

.search-main {
    position: relative;
    background: #ffffff;
    overflow: hidden;
    padding-bottom: 15px;
}
.swiper-title2 {
    position: fixed;
    top: 0px;
    width: 1200px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    color: #333;
    border-left: 2px solid #189349;
    font-weight: 600;
    background-color: #fff;
    z-index: 99;
    border: 1px solid #DEDEDE;
}

.xx {
    display: flex;
    text-align: center;
    white-space: nowrap;
    font-size: 15px;
}

.screen {
    flex: 1;
    font-weight: 600;
    color: red;
    font-size: 17px;
}

.xx a {
    flex: 1;
    margin-left: 2px;
}

.xx a:hover {
    background-color: #4C76E2;
    color: #fff;
    border-radius: 3px;
}

.zikao-tr {
    display: flex;
    padding: 3px;
}

.td-item1 {
    flex: 3;
    padding-left: 15px;
}

.td-item2 {
    flex: 97;
    display: flex;
    flex-wrap: wrap;
}

.td-item1 button {
    border: 1px solid #E1E1E1;
    background-color: #F8F8F8;
    color: #FD3938;
    font-size: 13px;
    width: 22px;
    height: 22px;
    text-align: center;
    line-height: 22px;
}

.td-item1 button:hover {
    color: #FFFFFf;
    background-color: red;
}

.td-item2 div {
    width: 20%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.td-item2 div a {
    line-height: 29px;
}

.td-item2 div a:hover {
    color: #FD3938;
}

.zikaozhuan-title {
    line-height: 30px;
    font-weight: 600;
    color: red;
    font-size: 17px;
    margin-left: 15px;
    margin-top: 10px;
}

.click_but {
    border: 1px solid #D8D8D8;
    background: #4E76DE !important;
    color: #FFF !important;
}

.table3 {
    position: relative;
    top: 60px;
}
</style>

HTML部分

   <div class="search-main wrapper">
        <div class="swiper-title2 xx nav-top">
            <span class="screen">筛选:</span>
            <a href="#" class="blue-bg">全部</a>
            <a href="#" data-typeid="1">A</a>
            <a href="#" data-typeid="2">B</a>
            <a href="#" data-typeid="3">C</a>
            <a href="#" data-typeid="4">D</a>
            <a href="#" data-typeid="5">E</a>
            <a href="#" data-typeid="6">F</a>
            <a href="#" data-typeid="7">G</a>
            <a href="#" data-typeid="8">H</a>
            <a href="#" data-typeid="9">I</a>
            <a href="#" data-typeid="10">J</a>
        </div>
        <table class="table3" align="center" cellpadding="20" cellspacing="0" width=1200px>
            <tbody>
                <tr class="zikao-tr" id="type-1" data-typeid="1">
                    <td class="td-item1"><button>A</button></td>
                    <td class="td-item2">
                        <div><a href="#" name="A">04145安全生产法及相关04145安全生产法及相关法律知识法律知识</a></div>
                        <div><a href="#">01B0206_国际贸易(停考)</a></div>
      
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值