Question

我正在我的投资组合网站上工作，我有三个可自动滚动的水平部分（不包括Fiddle中的代码）最上面的部分是标题，并作为锚点的链接（即图像）。我已经使用了锚定html的基本链接，但我想让图像左对齐，并在点击时有一个平滑的滚动。

我已经设置了一个jsFiddle：https://jsfiddle.net/Lzezqqv7/3/

  <html>
<head>
    <title>Max Waelbers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="scrollContent" class="container1">
      <div class="projects">
        <p>title: <a href="#link1">Project 1</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017<br>
            <br>A bundle of texts created by 11 <br>different authors, the texts are<br>sorted by the number of chapters <br>from the different authors.</p>
    </div>
     <div class="projects">
        <p>title: <a href="#link2">Project 2</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
    <div class="projects">
        <p>title: <a href="#link3">Project 3</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
     <div class="projects">
        <p>title: <a href="#link4">Project 4</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
    <div class="projects">
        <p>title: <a href="#link5">Project 5</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
     <div class="projects">
        <p>title: <a href="#link6">Project 6</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>

 <div class="projects">
        <p>title: <a href="#link7">Project 7</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
     <div class="projects">
        <p>title: <a href="#link8">Project 8</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
    <div class="projects">
        <p>title: <a href="#link9">Project 9</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
     <div class="projects">
        <p>title: <a href="#link10">Project 10</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
    <div class="projects">
        <p>title: <a href="#link11">Project 11</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
     <div class="projects">
        <a href="#link12">Project 12</a>
        <p>title: </p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
    </div>

<div class="container2" id="scrollContent2">

    <div class="images" id="link1">1</div>
    <div class="images"id="link2">2</div>
    <div class="images"id="link3">3</div>
     <div class="images" id="link4">4</div>
    <div class="images"id="link5">5</div>
    <div class="images"id="link6">6</div>
     <div class="images" id="link">7</div>
    <div class="images"id="link8">8</div>
    <div class="images"id="link9">9</div>
     <div class="images" id="link10">10</div>
    <div class="images" id="link11">11</div>
    <div class="images" id="link12">12</div>

</div>

<div class="container3">
    <div class="about">
        <p>name</p>
        <p>school</p>
    </div>
     <div class="about">
        <p>place</p>
    </div>
    <div class="about">
        <p>Contact</p>
        <p>phone number<br>email</p>
    </div>

<script type='text/javascript'>

 new AutoDivScroll( "scrollContent", 50, 1, 2, "nohover" );
 new AutoDivScroll( "scrollContent2", 50, 1, 2, "nohover" );

</script>

</body>
</html>

body{
    margin:0;
}
::-webkit-scrollbar { 
    display: none; 
}
.projects{
    margin-right: 15px;
    margin-left: 10px;
    width: 200px;
    height: 170px;
    overflow-x: scroll;
    white-space: nowrap;
    display: inline-block;
}
.about{
    margin-right: 15px;
    margin-left: 10px;
    width: 200px;
    height: 80px;
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
    display: inline-block;
}
ul{
    list-style: none;
    float: left;
}
a{
    text-decoration: none;
}
a:visited{
    color: black;
}
a:active{
    color:black;
}
.container1{
    font-family: Favorit;
    font-size: 12px;
    height: 175px;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap

}
.container2 {
    margin-left: 10px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap
}
.images {
    height: 500px;
    width: 800px;
    background: black;
    margin-right: 5px;
    overflow-x: scroll;
    white-space: nowrap;
    display: inline-block;
    font-size: 50px;
    color: white;
    text-align: center;
}
.container3{
    font-family: Favorit;
    font-size: 12px;
    white-space: nowrap;
}

感谢您的时间。

Div内的水平锚

0 个答案: