背景: 多くのページが以下のような効果を持っていることがわかったので、赤線枠部分をクリックするとページが別の位置にスライドします。 ページのソースコードを見ると、赤線が表示されていることがわかりました。フレーム部分はCSSの角丸枠で実装しているので... ....
コードをアップロード
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/> <style> body{ margin:0px; padding:0px; background-color: #1f272a; } /*圆角效果的实现*/ .btn-dwn { /* 必填项 */ /*宽度和高度必须一致,才能保证是圆形*/ width: 58px; height: 58px; /*border-radius的属性值越大,圆形效果越明显*/ border-radius: 50%; /*设置边框大小、样式、颜色*/ border: 2px solid rgba(255,255,255,.15); /* 非必填项 */ color: rgba(255,255,255,.6); text-align: center; font-size: 18px; position: absolute; left: 50%; bottom: 60px; line-height: 58px; } </style> <script> //滑动效果 function scrollToTarget(D){ if(D == 1) // Top of page { D = 0; } else if(D == 2) // Bottom of page { D = $(document).height(); } else // Specific Bloc { D = $(D).offset().top; } $('html,body').animate({scrollTop:D}, 'slow'); } </script></head><body><a onclick="scrollToTarget('#core')" class="btn-dwn"><span class="glyphicon glyphicon-chevron-down"></span></a></body></html>
効果を実現
スライドについて
スクリプトスクリプト内のscrollToTargetメソッド、jQueryのアニメーション効果を使用ページのソースコードをコピーする場合は、ページ内に「core」という ID を持つ要素も必要であることに注意してください。ボタンをクリックすると、対応する位置にスライドします