当我将div合并到另一个部分时,为什么会丢失滚动效果?

时间:2013-04-01 17:02:24

标签: jquery html scroll scrollto

这是我的网站:

violetoeuvre.com

我制作了一个测试页http://violetoeuvre.com/scroll.html

我希望主页上写入部分的内容与滚动页面上的内容相同,但是当我将其合并到home_writing div中时,滚动效果会消失。

我希望修正右上角的链接,并平滑滚动到写作部分内的内容。

我怀疑这个错误与div,类和id如何相互关联有关,但我无法弄明白。

这是我的css:

.home_writing {
    display: block;
    background: rgba(50,50,50,0);
    height: 1000px;
    text-align: left;
    overflow: scroll;
}

    /* CSS for the small boxes that will scroll inside a div */

    #small-box-container {
        border: 1px solid black;
        background: rgba(10,200,10,0);
        width: 980px;
        height: 2000px;
        overflow: scroll;
    }

 #small-box-links{
    position: fixed;
    margin-left: 700px;
    height: 150px;
 }

    .small-box {

        color: #fff;
        width: 980px;
        margin: 0 0 50px 0;
    }

    #small-box1 {
        background: blue;
    }

    #small-box2 {
        background: red;
        height: 500px;
    }

    #small-box3 {
        background: green;
    }

     #small-box4 {
        background: aqua;
    }

和html:

<div class="home_writing">
    <div id="small-box-container">
        <div id="small-box-links">
            <a href="#small-box1">deadspin</a>
            <a href="#small-box2">gawker</a>
            <a href="#small-box3">the awl</a>
            <a href="#small-box4">other</a>
        </div>
    </div>

    <div>
        <div id="small-box1" class="small-box"><h2>deadspin</h2>
            <h3>How Pat Summitt Ruined The Best Thing About Women's Basketball</h3>
                <p>In a kinder world, Geno 'n' Pat would be a sitcom about a bumbling male-female cop duo. Geno would cause trouble, and Pat would be very serious and by-the-book, and she'd occasionally trip on things. Alas, women's basketball is not that world.
                <a href="http://deadspin.com/5704435/how-pat-summitt-ruined-the-best-thing-about-womens-basketball">read</a>
                </p>
                <h3>Dropping In On The Demented Utopia Of The Gathering Of The Juggalos</h3>
                <p>ICP's version of hip hop—politically anti-racist, but very white and non-urban—is the escape plan for the kids who don't ever leave. The Gathering is an annual diversion. Of any of the things Juggalos hold dear, this is the one I might be able to understand now.On the other hand, I never sat with Juggalos in the high school cafeteria.
                <a href="http://deadspin.com/5831225/dropping-in-on-the-demented-utopia-of-the-gathering-of-the-juggalos">read</a></p>
                <h3>Starting In The Basement: A Day At Open Tryouts For The NBA's D-League</h3>
                <p> 
                One of the first things that Jay Larranaga, head coach of the Erie Bayhawks, tells the 35 players who have paid $150 apiece to possibly have a shot at maybe earning a spot on his NBA Development League team, is that they are not really talented. Well, he doesn't say it exactly like that.
                <a href="http://deadspin.com/5846103/starting-in-the-basement-a-day-at-open-tryouts-for-the-nbas-d+league"></a>read</p>
                <h3>Celebrating Serena Williams, Tennis Traditionalist</h3>
                <p>
                But what Serena reminded us is that, despite a year-long break from the sport, she still cares furiously about tennis, and about winning. This attitude, and this way of expressing it, was in no way unprecedented.
                <a href="http://deadspin.com/5839361/celebrating-serena-williams-tennis-traditionalist">read</a><p>
                <h3>The Graceful, Oversized Legacy of Yao Ming</h3>
                <p>The looming size of that body distracted us, at first, from considering what he could do with it. Yao did not start off great. He started off like a project.
                <a href="http://deadspin.com/5823208/the-graceful-oversized-legacy-of-yao-ming">read</a></p>
        </div>

        <div id="small-box2" class="small-box"><h2>gawker</h2>
            <h3>All the Girls Standing in the Line For the Rap Show&#58; Iggy Azalea’s Sudden Rise</h3>
                    <p>Of all of the self-reflective periods that hip hop has endured over the years, this one might be the most muddled: a culture that has spread far enough to reach a female teenager in Mullumbimby, Australia, and produce a viral video and an inevitable record deal is still doing its best gate-keeping job on a growing force of female rappers.
                    <a href="http://gawker.com/5916913/all-the-girls-standing-in-the-line-for-the-rap-show-iggy-azaleas-sudden-rise">read full article</a>
                    </p>
            <h3>Sexile in Guyville&#58; Lady Writers and the Male Celebrities They Profile</h3>
                    <p>The art of the form lies in a seamless two-step between writer and subject that is hard not to appreciate. Plenty of celebrity profiles suffer from the simple balance of an actor protecting an image, and the reporter duly packaging his or her cut-and-dry photo spread. The male-female profile knows no such limitations.
                    <a href="http://gawker.com/5893317/sexile-in-guyville-lady-writers-and-the-male-celebrities-they-profile">read full article</a>
                    </p>
        </div>

        <div id="small-box3" class="small-box"><h2>the awl</h2>
            <h3>Selling Herself Short&#58; The Miscontexualization of Nicki Minaj</h3>
            <p>Nicki Minaj's "Pink Friday" arrived just before this Thanksgiving. It could be difficult for anyone who is not a black female rapper (including me, a white female home-recording wannabe rapper) to understand that this is remarkable, and something to be celebrated, but I think Lin Que’s story provides some context. Minaj didn’t just release her first major album, she released the album that Lin Que—and a lot of other female rappers—once refused to record.
            <a href="http://www.theawl.com/2010/11/selling-herself-short-the-miscontexualization-of-nicki-minaj">read full article</a>
            </p>
            <h3>With the Ladies in the Back at an Odd Future Show</h3>
            <p>Their trick is deciding who gets to be in on the joke; for listeners sensitive to lyrics about rape or homophobia, the trick is deciding if you really want to be in on the joke in the first place. Young white men, Tyler masks strapped on, were clamoring for that right on Friday, while the women tried to find a place for themselves.
            <a href="http://www.theawl.com/2011/05/with-the-ladies-in-the-back-at-an-odd-future-show">read full article</a>
            </p>
            <h3>Kanye’s '808s'&#58; How A Machine Brought Heartbreak To Hip Hop</h3>
            <p>The immediate reaction to the album might have been similar to the one in Newport, Rhode Island in 1965, when Bob Dylan went electric at the Folk Festival. We don’t like drastic changes from the artists we’ve come to depend on for a certain kind of musical narrative, even if those artists happen to be going through drastic changes themselves.
            <a href="http://www.theawl.com/2011/09/kanye%E2%80%99s-808s-how-a-machine-brought-heartbreak-to-hip-hop">read full article</a>
            </p>
            <h3>"Make Me Proud": Does Drake Actually Care About Women?</h3>
            <p>But we’re already accustomed to chauvinism in hip hop; on Take Care, the women who are not Drake’s matriarchs are either treated like impassive, mindless listeners who need to be told they’ve made someone proud, or they need to be put in their place for doing him wrong. The “la da das" are only so distracting here.
            <a href="http://www.theawl.com/2011/11/make-me-proud-does-drake-actually-care-about-women">read full article</a>
            </p>
        </div>

        <div id="small-box4" class="small-box"><h2>other</h2>
            <h3>daily intel</h3>
            <h3>Kim’s Decision: How Kim Kardashian Made the Same Mistake As LeBron James</h3>
            <p>We may tolerate televised spectacles, but we’re affronted when they’re just as publicly unmasked. The interplay between audience and reality star acknowledges our complicity: We’re equal partners in the extravaganza and the collapse. And we don’t like to come out feeling like the chumps in that exchange.
            <a href="http://nymag.com/daily/intelligencer/2011/11/kims_decision_how_how_kim_kard.html">read full article</a>
            </p>
            <h3>sports illustrated</h3>
        </div>
    </div>

</div>

提前致谢。 克莱尔

1 个答案:

答案 0 :(得分:0)

我想我明白了。虽然教程中有脚本,但我只是将脚本放在写入div部分中。这似乎不优雅,但它的工作。