锚无法正常工作

Question

I am having a problem with anchors. 我的锚点有问题。 It jumps to the middle of the page- no smooth scroll or nothing what so ever. 它跳到页面的中间-没有平滑的滚动或什么也没有。 I read something that when your <div> is not long enough it will not scroll so I tried to make it higher, but still nothing. 我读到一些内容，当您的<div>不够长时，它不会滚动，因此我尝试将其调高，但仍然没有。

HTML 的HTML

 <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <title></title>



    <!--Stylesheets-->
    <link rel="stylesheet" href="styles/design.css" type="text/css" media="screen" />
    <link rel="stylesheet" type="text/css"  href="styles/fonts.css">        
    <!--[if IE]<link rel="stylesheet" type="text/css" href="styles/msiefonts.css"><![endif]-->

    <!--Scripts Here-->
    <script src="scripts/jquery-1.11.0.js"></script>
    <script src="scripts/scrollable.js"></script>
    <script src="scripts/responsive_nav.js"></script>


</head>

<body>
<div id="wrap">    

            <div class="top-container-box"> 

                     <div class="logo">
                        <img src="pictures/logo.png" alt="logo" />
                     </div>
             </div>

         <div class="container">   

                   <div id="scroller-anchor"></div>  
                        <div id="menu">
                        <div class="nav_logo"></div>
                        <nav>
                          <ul class="nav">
                                <li><a href="#">&#x2630;</a></li>
                                <li><a href="index.php?site=home">Home</a></li>
                                <li><a href="index.php?site=about">About Me</a></li>
                                <li><a href="index.php?site=works">Works</a></li>
                                <li><a href="#contact" rel="" class="anchorLink">Contact</a></li>
                          </ul>
                        </nav>  
                        </div>

        <div id="break-point"></div>   

            <div class="lower-container-box">
                    <section class="textbox">
                            <p class="first-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint o       ccaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </section>           

                    <section class="textbox2">
                            <p class="second-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint o       ccaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </section> 

                    <section class="textbox3">
                            <p class="third-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint o       ccaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </section>


                    <section class="textbox4">
                        <a name="contact" id="contact"></a>
                                <div id="contact_form">

                                        <form name="form1" id="ff" method="post" action="insert.php"> 
                                            <label>
                                                <span>Name*:</span>
                                            <input type="text" placeholder="Please enter your name" name="name" id="name">
                                            </label>

                                            <label>
                                            <span>City*:</span>    
                                            <input type="text" placeholder="Please enter your city" name="city" id="city" required>
                                            </label>

                                            <label>
                                            <span>Phone:</span>
                                            <input type="tel" placeholder="Please enter your phone" name="phone" id="phone">
                                            </label>

                                            <label>
                                            <span>Email*:</span>
                                            <input type="email" placeholder="youremail@gmail.com" name="email" id="email" required>
                                            </label>

                                            <input class="sendButton" type="submit" name="Submit" value="Send">
                                            <!--?php include 'insert.php' ?>-->
                                       </form>
                               </div>
                    </section> 

            <div>

        </div>



    </div>        
          <div id="footer">
          <div id="footer-container">
          <p id="footer-text">Copyright &#169; [] [2014] All Rights Reserved!</p>           
                          <ul>
                                <li><a href="index.php?site=home">Home</a></li>
                                <li><a href="index.php?site=about">About Me</a></li>
                                <li><a href="index.php?site=works">Works</a></li>
                                <li><a href="index.php?site=contact">Contact</a></li>
                          </ul>
         </div>              
        </div>  
</div>



<!--<script src="scripts/sticky.js"></script>-->

</body>
</html>

Javascript: Javascript：

$(document).ready(function () {
    $(document).on("click", 'a[href^="#"]', function () {
        $('html, body').animate({
            scrollTop: $($.attr(this, 'href')).offset().top
        }, 500);
        return false;
    });
});

Answer 1

You have two elements with the same id attribute. 您有两个具有相同id属性的元素。 It's forbidden and causes your problem. 禁止这样做会导致您的问题。 Remove the id from the anchor in <li> and everything will be fine. 从<li>的锚点删除id ，一切都会好起来的。

<li><a href="#contact" rel="" class="anchorLink">Contact</a></li>

Here's the link to working example: jsFiddle 这是工作示例的链接： jsFiddle

EDIT : 编辑：

Of course, remember to wrap your jQuery with $(document).ready method, or its shortcut: 当然，请记住用$(document).ready方法或其快捷方式包装jQuery：

$(function() {
    $('a').click(function () {
    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
        return false;
    });
});

锚无法正常工作

问题描述

1 个解决方案

解决方案1
3 已采纳 2014-03-06 14:47:48

锚无法正常工作

问题描述

1 个解决方案

解决方案1 3 已采纳 2014-03-06 14:47:48

解决方案1
3 已采纳 2014-03-06 14:47:48