ホームページ > 記事 > ウェブフロントエンド > page_jquery 内のアンカー ポイントのスムーズなジャンプ効果を実現するための jQuery のメソッドの概要
page_jquery 内のアンカー ポイントのスムーズなジャンプ効果を実現するための jQuery のメソッドの概要
- WBOYオリジナル
- 2016-05-16 15:59:561331ブラウズ
通常、ナビゲーションをスクロールしてコンテンツに移動するときは、スクロール効果を持たずに、スワイプしてコンテンツに直接ジャンプします。さらに、URL リンクの最後には「小さな尾」が表示されます。 #keleyi のように、今日は、スクロール速度を設定できるだけでなく、URL リンクに「小さな尾」を付けない、jquery で作成されたスクロール特殊効果を紹介します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现页面内锚点平滑跳转</title><base target="_blank" />
<style type="text/css">
#hovertree {
height: 800px;
background: red;
text-align:center;color:white;
}
#keleyi {
height: 800px;
background: green;text-align:center;color:white;
}
#myslider {
height: 800px;
background: black;text-align:center;color:white;
}
#zonemenu {
height: 800px;
background: yellow;text-align:center;
}
.keleyilink{position:fixed;}
.keleyilink a {text-decoration:none;}
</style>
</head>
<body>
<div class="keleyilink">
<a href="javascript:scroll('hovertree');" target="_self">HoverTree</a>
<a href="javascript:scroll('keleyi');" target="_self">KKK</a>
<a href="javascript:scroll('myslider');" target="_self">myslider</a>
<a href="javascript:scroll('zonemenu');" target="_self">ZoneMenu</a>
</div>
<div id="hovertree">hovertree
<br /><br /><br /><a href="">原文</a> <a href="">JJJ</a> <a href="http://hovertree.com">HoverTree</a> <a href="/">特效库</a>
</div>
<div id="keleyi">jb51</div>
<div id="myslider">myslider</div>
<div id="zonemenu">zonemenu</div>
<script src="jquery/jquery-1.11.3.min.js"></script>
<script src="jquery.hovertreescroll.js"></script>
<script>
function scroll(id) {
$("#" + id).HoverTreeScroll(1000);
}
</script>
</body>
</html>
より簡単な実装方法:
コードには 1 つの文しかありません
$("html,body").animate({scrollTop: $("#elementid").offset().top}, 1000);
animate() メソッドは、CSS カスタム アニメーションのセットを実装するために使用されます。
という 2 つの呼び出しメソッドがあります。最初のフォームは、以下に示すように 4 つのパラメーターを受け入れます
.animate(プロパティ [, 期間] [, イージング] [, 完了] )
プロパティ – スタイルのプロパティと値を含むマップ
期間 – オプションの速度パラメーター。プリセット文字列またはミリ秒値のいずれかになります
イージング – オプションのイージング タイプ。jQuery にはスイングとリニアの 2 つのデフォルト タイプしかありません。他の効果を使用するには、イージング プラグインをインストールする必要があります
。
complete – アニメーションの終了時に呼び出されるオプションのコールバック関数
最初の形式の例は次のとおりです
.animate({property1: 'value1', property2: 'value2'},
speed, easing, function() {
alert('The animation is finished.');
});
この記事でアンカー ポイント ジャンプを実装するコードは最初の形式を使用します
$("html,body") は、HTML 要素または body 要素のアニメーション化、つまり CSS 属性値の変更を表します
scrollTop は変更する属性値で、スクロールバーのスライド距離を表します。ここではブラウザのスクロールバーを引き下げた後にブラウザ上部に隠れるHTML(本文)の高さを表します。
$("#elementid").offset().top は、ブラウザの上部で隠す必要がある HTML (本文) の高さであり、ID elementid を持つ要素の上部からの絶対距離を表します。 Web ページの上部 (ブラウザの表示領域の上部ではありません)。
1000 はアニメーション時間が 1 秒であることを意味します
.animate( プロパティ, オプション )
1 つは属性マッピング、もう 1 つはオプション マッピングです。実際、ここでの 2 番目のパラメーターは、最初の形式の 2 ～ 4 個のパラメーターを別のマッピングにカプセル化し、2 つのオプションを追加します。 2 番目の形式のコードは次のとおりです:
.animate({
property1: 'value1',
property2: 'value2'
}, {
duration: 'value',
easing: 'value',
complete: function(){
alert('The animation is finished.');
},
queue: boolen,
step: callback
});