采美百科页面

src/main/resources/static/css/encyclopedia/detail.css

@@ -26,7 +26,7 @@
     .bk-literature .bk-literature-list{margin-top:24px}
     .bk-literature .bk-literature-list li{font-size:14px;color:#999999;margin-top:14px;line-height:24px}
     .bk-literature .bk-literature-list li em{font-style: normal;}
-    .bk-literature .bk-literature-list li i{display: inline-block;width: 16px; height: 16px; background:#F7F7F7 url("/img/encyclopedia/assets/pc-icon-arrowup.png") no-repeat center; background-size: 12px; }
+    .bk-literature .bk-literature-list li i{display: inline-block;width: 16px; height: 16px; background:#F7F7F7 url("/img/encyclopedia/assets/pc-icon-arrowup.png") no-repeat center; background-size: 12px; cursor: pointer; }
     .bk-literature .bk-literature-list li a{color: #333;}
     .bk-literature .bk-literature-list li a.link::after{content: ""; display: inline-block; width: 16px;height: 16px; background: url("/img/encyclopedia/assets/pc-icon-link.png") no-repeat center; background-size: 16px;}
     .bk-literature .bk-literature-list li a.image::after{content: ""; display: inline-block; width: 16px;height: 16px; background: url("/img/encyclopedia/assets/pc-icon-img.png") no-repeat center; background-size: 16px;}
@@ -36,6 +36,7 @@
     .bk-literature .bk-literature-list li a.link:hover{color: #F57C40; text-decoration: underline}
     .bk-literature .bk-literature-list li a.link:hover::after{background-image: url("/img/encyclopedia/assets/pc-icon-link-hover.png")}
     .bk-literature .bk-literature-list li a.image:hover::after{background-image: url("/img/encyclopedia/assets/pc-icon-img-hover.png")}
+    .bk-literature .bk-literature-list li i:hover{ background-image:url("/img/encyclopedia/assets/pc-icon-arrowup-hover.png")}
     .bk-pv{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:right;background:#fff;margin-top:64px;-webkit-column-gap:32px;-moz-column-gap:32px;column-gap:32px}
     .bk-pv .bk-pv-item{font-size:14px;color:#999999}
     .bk-detail-right .bk-album,.bk-detail-right .bk-company{width:280px;height:280px;background:#FAFAFA;margin-bottom:25px}

src/main/resources/static/js/encyclopedia/detail.js

@@ -48,6 +48,15 @@ $(function () {
         }, {duration: 500, easing: "swing"});
     })
 
+    $('.bk-literature-list i').on('click', function(){
+        const id = $(this).parent('li').attr('id')
+        if(!id) return
+        const selector = '[data-ctrid=' + id + ']'
+        $("html, body").animate({
+            scrollTop: $(selector).eq(0).offset().top - 150
+        }, {duration: 500, easing: "swing"});
+    })
+
     // 视频播放
     $('.bk-album .bk-play').on('click', function(){
         const videoUrl = $(this).siblings('video').attr('src');

src/main/resources/templates/encyclopedia/detail.html

@@ -90,7 +90,7 @@
                             <span th:text="${item.websiteName}"></span>
                             <span th:if="${item.acitationTimeStr}">[引用日期:<span th:text="${item.acitationTimeStr}"></span>]</span>
                         </li>
-                        <li th:if="${item.referenceType == 2}">
+                        <li th:if="${item.referenceType == 2}" th:id="${item.ctrlId}">
                             [<em th:text="${stat.index+1}">1</em>]
                             <i></i>
                             <span th:text="${item.author}"></span>
@@ -98,7 +98,7 @@
                             <span th:text="${item.press}"></span>，
                             <span th:text="${item.publicationYearStr}"></span>
                         </li>
-                        <li th:if="${item.referenceType == 3}">
+                        <li th:if="${item.referenceType == 3}" th:id="${item.ctrlId}">
                             [<em th:text="${stat.index+1}">1</em>]
                             <i></i>
                             <span th:text="${item.referenceDescription}"></span>