Question

我试图让锚标签向下滚动到我网站的各个部分，但我无法让它工作。这是我从http://www.cmscanbesimple.org/blog/smooth-page-scroll-to-an-anchor获取代码的地方。我将它复制到自己的HTML文件中，它完美地工作，所以我无法弄清楚它为什么不在我的网站上工作。

<head>
    <meta charset="utf-8">
    <title>J2 Productions</title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <link rel="stylesheet" type="text/css" href="parrallax.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="index.js"></script>
</head>

<body>
    <div class="parallax">
        <div class="parallax__layer parallax__layer--back">
            <div id="paintsplash">
                <img src="paint_splash.png" height="93%" width="93%" />
            </div>
        </div>
        <div class="parallax__layer parallax__layer--base">
            <div id="middle">
                <div id="services">
                    <div id="s_content">
                        <div id="s_title">
                            <p>Beats</p>
                        </div>
                        <div id="beat1">
                            <p>| Limitless |</p></br>
                            <iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/186082426&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
                        </div>
                        <div id="beat2">
                            <p>| Haze |</p></br>
                            <iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/176496757&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
                        </div>
                        <div id="beat3">
                            <p>| Self-Destruct |</p></br>
                            <iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/159969838&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
                        </div>
                        <div id="beat4">
                            <p>| Midnight Bass |</p></br>
                            <iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/162606984&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
                        </div>
                    </div>
                </div>
                <div id="recent">
                    <div id="r_content">
                        <div id="r_title">
                            <p>Recent</p>
                        </div>
                        <div id="one"> 
                            <a href="https://itunes.apple.com/us/album/one-ep/id984646172">
                                <img src="Front%20Cover.jpg" width="300">
                            </a>
                        </div>
                        <div id="onetxt">
                            <p align="center">
                                | Speaking My Language |
                                <br/>| Pay Up |
                                <br/>| One Way |
                            </p>
                        </div>
                        <div id="rollin"> 
                            <a href="https://itunes.apple.com/us/album/rollin-i-dont-wanna-grow-up/id925559884">
                                <img src="rollin.jpg" width="300">
                            </a>
                        </div>
                        <div id="rollintxt">
                            <p align="center">| Rare of Breed - Rollin' |</p>
                        </div>
                    </div>
                </div>
                <div id="pricing">
                    <div id="p_content">
                        <div id="p_title">
                            <p>Pricing</p>
                        </div>
                        <div id='exclusive'>
                            <img src="Exclusive.png" width="650">
                        </div>
                        <div id="custom">
                            <img src="custom.png" width="650">
                        </div>
                    </div>
                </div>
                <div id="aboutme">
                    <div id="a_content">
                        <div id="a_title">
                            <p>Contact Me</p>
                        </div>
                        <div id="me">
                            <img src="me.png" width='350px' />
                        </div>
                        <div id="email">
                            <img src="contact.png" width="100%" height="600px">
                        </div>
                        <div id="social">
                            <div id="fb"> 
                                <a href="https://www.facebook.com/J2producing">
                                    <img src="facebook.png" width="113px">
                                </a>
                            </div>
                            <div id="tw"> 
                                <a href="https://twitter.com/j2_productionz">
                                    <img src="twitter.png" width="113px">
                                </a>
                            </div>
                            <div id="ig"> 
                                <a href="https://instagram.com/j2productions">
                                    <img src="instagram.png" width="123px">
                                </a>
                            </div>
                            <div id="yt"> 
                                <a href="https://www.youtube.com/channel/UC2Z9nuiZHdU6fN-UfOie6QA">
                                    <img width="123px" src="youtube.png">
                                </a>
                            </div>
                            <div id="gp"> 
                                <a href="https://plus.google.com/u/0/b/100577545228957896103/100577545228957896103/about?hl=en">
                                    <img src="google.png" width="115px">
                                </a>
                            </div>
                            <div id="sc"> 
                                <a href="https://soundcloud.com/j2productions">
                                    <img src="soundcloud.png" width="115px">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="seperators"> 
                    <a id="page1"></a>
                    <div id="page2"></div>
                    <div id="page3"></div>
                    <div id="page4"></div>
                </div>
            </div>
        </div>
    </div>
    <div id="top"> 
        <a href="index.html">
            <img src="J2Productions-text.png" id="logo" draggable="false">
        </a>
        <a href="#page1" class="nav scroll" id="home">BEATS</a>
        <a href="#page2" class="nav scroll" id="beats">RECENT</a>
        <a href="#page3" class="nav scroll" id="contact">PRICING</a>
        <a href="#page4" class="nav scroll" id="about">ABOUT ME</a>
        <img src="line.png" id="line">
    </div>
    <div id="bottom"></div>
    <script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
            $('#paintsplash').fadeIn(1200).delay(3500);
        });
    </script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event) {
                event.preventDefault();
                $('html,body').animate({
                    scrollTop: $(this.hash).offset().top
                }, 1000);
            });
        });
    </script>
</body>

Answer 1

锚href是目标id。由于您的锚href设置为#page1，因此目标为<a id="page1">。你必须改变它们。例如：

    <div id ="top">
        <a href="index.html"><img src="J2Productions-text.png" id="logo" draggable="false"></a>
        <a href="#services" class="nav scroll" id="home">BEATS</a>
        <a href="#recent" class="nav scroll" id="beats">RECENT</a>
        <a href="#pricing" class="nav scroll" id="contact">PRICING</a>
        <a href="#separators" class="nav scroll" id="about">ABOUT ME</a>
        <img src="line.png" id="line">
    </div>

修改

检查一下：

＆＃13;
＆＃13;
<div id="seperators"> <a id="page1"></a> <div id="page2"></div> <div id="page3"></div> <div id="page4"></div> </div> <div class="parallax"> <div class="parallax__layer parallax__layer--back"> <div id="paintsplash"> <img src="paint_splash.png" height="93%" width="93%"/> </div> </div> <div class="parallax__layer parallax__layer--base"> <div id="middle"> <div id="services"> <div id="s_content"> <div id="s_title"> <p>Beats</p> </div> <div id="beat1"> <p> | Limitless | </p></br> <iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/186082426&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe> </div> <div id="beat2"> <p> | Haze | </p></br> <iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/176496757&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe> </div> <div id="beat3"> <p> | Self-Destruct | </p></br> <iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/159969838&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe> </div> <div id="beat4"> <p> | Midnight Bass | </p></br> <iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/162606984&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe> </div> </div> </div> <div id="recent"> <div id="r_content"> <div id="r_title"> <p>Recent</p> </div> <div id="one"> <a href="https://itunes.apple.com/us/album/one-ep/id984646172"> <img src="Front%20Cover.jpg" width="300"> </a> </div> <div id="onetxt"> <p align="center"> | Speaking My Language |<br/> | Pay Up |<br/> | One Way | </p> </div> <div id="rollin"> <a href="https://itunes.apple.com/us/album/rollin-i-dont-wanna-grow-up/id925559884"> <img src="rollin.jpg" width="300"> </a> </div> <div id="rollintxt"> <p align="center"> | Rare of Breed - Rollin' | </p> </div> </div> </div> <div id="pricing"> <div id="p_content"> <div id="p_title"> <p>Pricing</p> </div> <div id='exclusive'> <img src="Exclusive.png" width="650"> </div> <div id="custom"> <img src="custom.png" width="650"> </div> </div> </div> <div id="aboutme"> <div id="a_content"> <div id="a_title"> <p>Contact Me</p> </div> <div id="me"> <img src="me.png" width='350px'/> </div> <div id="email"> <img src="contact.png" width="100%" height="600px"> </div> <div id="social"> <div id="fb"> <a href="https://www.facebook.com/J2producing"> <img src="facebook.png" width="113px"> </a> </div> <div id="tw"> <a href="https://twitter.com/j2_productionz"> <img src="twitter.png" width="113px"> </a> </div> <div id="ig"> <a href="https://instagram.com/j2productions"> <img src="instagram.png" width="123px"> </a> </div> <div id="yt"> <a href="https://www.youtube.com/channel/UC2Z9nuiZHdU6fN-UfOie6QA"> <img width="123px" src="youtube.png"> </a> </div> <div id="gp"> <a href="https://plus.google.com/u/0/b/100577545228957896103/100577545228957896103/about?hl=en"> <img src="google.png" width="115px"> </a> </div> <div id="sc"> <a href="https://soundcloud.com/j2productions"> <img src="soundcloud.png" width="115px"> </a> </div> </div> </div> </div> </div> </div> </div> <div id ="top"> <a href="index.html"><img src="J2Productions-text.png" id="logo" draggable="false"></a> <a href="#page1" class="nav scroll" id="home">BEATS</a> <a href="#page2" class="nav scroll" id="beats">RECENT</a> <a href="#page3" class="nav scroll" id="contact">PRICING</a> <a href="#page4" class="nav scroll" id="about">ABOUT ME</a> <img src="line.png" id="line"> </div> <div id="bottom"> </div> <script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script> <script> $(document).ready(function() { $('#paintsplash').fadeIn(1200).delay(3500); }); </script> <script type="text/javascript"> jQuery(document).ready(function($) { $(".scroll").click(function(event) { event.preventDefault(); $('html,body').animate( { scrollTop:$(this.hash).offset().top } , 1000); } ); } ); </script>
＆＃13;
＆＃13;
＆＃13;

我无法让我的网站顺畅滚动

1 个答案: