0

HTML セクションへの遷移をアニメーション化してスムーズにすることができることは承知しています。

このウェブサイト: http://en.wikipedia.org/wiki/Dobroslav_Jevdevic

  • HTML セクションを使用します。
  • 目次からリンクをクリックすると、すぐそこに飛びます。

このウェブサイト: http://whatbrowser.org

  • HTML セクションを使用します。
  • リンク(ページ下部の「トップに戻る」)をクリックすると、スムーズに遷移します。

他の多くのウェブサイトでもこれを見てきましたが、どのようにしてそれを行うのでしょうか?

最初の推測では、あなたには jQuery が必要だと思いますが、私は HTML タイプの人なので、Java には詳しくありません...どうすれば正確にできますか? 助けてくれてありがとう:D

4

2 に答える 2

0

参照サイト(http://en.wikipedia.org/wiki/Dobroslav_Jevdevic)では、これはidのhwlpを使用して行われます。たとえば<a href="#abc">Click Here</a>、アンカータグhrefでは、アンカータグをクリックするとページがスクロールする要素のIDを渡しますが、スムーズな効果を得るには、jqueryメソッドを使用する必要があります。また、使用できるjavascriptメソッドscrollTo()メソッドがあります。同じ目的でhtmlコードのみを使用し、jqueryは使用しない場合は、このコードを参照してください

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<a href="#abc">Click Here</a>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>

   <h2 id="abc">Main Section</h2>
   <p>Hello</p>
   <p>Hello</p>
   <p>Hello</p>
   <p>Hello</p>
   <p>Hello</p>
   <p>Hello</p>
   <p>Hello</p>
   <p>Hello</p>
</body>
</html>
于 2013-03-09T15:47:39.003 に答える
0
$('body').animate({scrollTop: 222});
于 2013-03-09T14:00:47.823 に答える