クリックした後にアンカータグがページ上に配置されない

私は、アンカーの使用によって異なるdivにスクロールするウェブサイトを作成しています。しかし、リンクをクリックすると、アンカーされたdivはページの中央に配置されません。私はdivsを絶対的に配置しましたが、それがそれに影響を与えるかどうかはわかりません。誰でもアンカーを使用してdivを中央に配置する方法を知りませんか?助けてください!



<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jean and James</title>

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.anchor.js" type="text/javascript"></script>

<link href="jj_css.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="navigation" align="center">
JEAN AND JAMES
            
            

FEATURE PRODUCT
            
            

CONTACT
            
            

WORK
            
            
</div>

<div id="logo">

</div>


<div id="jeanandjames" align="center">

A boutique design firm specializing in hand crafted products and graphic print work. </div>
<div id="feature"> </div> <div id="contact"> Jean & James Chicago, IL

Donec faucibus nunc eget quam pretium vel porttitor diam venenatis. Nullam egestas, quam et congue rutrum, diam mauris tempus urna, eget mattis quam quam ac erat. Vivamus lobortis nunc quis arcu lobortis vel euismod felis tincidunt. Etiam facilisis, metus et mattis tempor, erat ipsum tincidunt diam, nec aliquam velit risus a lacus. Duis tempor bibendum felis, adipiscing mattis lorem eleifend fermentum. Nulla adipiscing consequat enim id sagittis. Suspendisse venenatis scelerisque orci, sed sollicitudin erat egestas in. Nunc orci leo, adipiscing vel consectetur sit amet, rutrum vitae nulla. Mauris ut mi nunc, non condimentum risus. Donec varius consequat quam vel lacinia. Etiam et eros nec quam egestas pellentesque sit amet ac nunc. </div>
</body> </html>

そしてここに私のCSSがあります:

#navigation A:link {text-decoration: none; color: #FFFFFF;}
#navigation A:visited {text-decoration: none; color: #FFFFFF;}
#navigation A:active {text-decoration: none; color: #FFFFFF;}
#navigation A:hover {text-decoration: none; color: #CC9;}

#navigation {
    position: fixed;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 20px;
    padding: 10px;
    z-index: 10;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color: #000;
    color: #FFF;
}

#logo {
    position: fixed;
    top: 150px;
    left: 50px;
}

#jeanandjames {
    position: absolute;
    top: 230px;
    left: 200px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

#feature {
    position: absolute;
    top: 600px;
    left: 200px;
}

#contact {
    position: absolute;
    top: 1200px;
    left: 200px;
    width: 500px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
ベストアンサー

私は残酷になるつもりはありませんが、マークアップとCSSの両方が悪く、質問は「CSSをどのように中心に置くのですか」のように基本的なものです。プラグインではなく、マークアップとCSSだけです。いくつかの問題に取り組んでみましょう:

  1. All those   entities are not the right way to
    space out your navigation. CSS is used for
    that.
  2. You are using align=”center” on a div, which defeats the
    purpose of CSS
  3. You have a class on your anchors called “anchorLink” which is
    an ideal way to style those kinds of links, and yet they are not
    styled.
  4. As a newcomer, you can be forgiven for not knowing this, but
    it’s considered good form to create a “fiddle” (a free service at
    jsfiddle.net) or another hosted sample so that people can tinker
    instead of merely analyse code.
  5. You are wrapping divs with anchor tags. I honestly can’t
    remember if this is “incorrect” markup or simply considered bad
    practice.

マークアップとCSSのフィーリングがあります(あなたの問題を解決するためにプラグインを含める必要はないので、それを含めて気にしません):

http://jsfiddle.net/85Tp5/

それは説教です。

実際の答えを提示しないという理由で、私がここにいるコメントは貴重なものだと思うので、私はとても喜んで喜んで拒否しています。質問自体を下落させた他の人たちは私と同じ立場にあるが、私たちが全部考えていることを書く力はなかった。

あなたが実際に本当の助けをしたいのであれば、あなたのイメージなしで動作するサンプルを作成するためにフィドルを使用してください。スクロールしているプラ​​グインについて心配しないでください(この時点であなたの問題ではないアンカーに直接ジャンプします)。あなたがそれを形にしたら、おそらくあなた自身の質問に答えたでしょう。しかし、そうでなければ、人々はあなたを助けるより良い立場にいるでしょう。

ではごきげんよう!

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です