Горизонтальные анкеры внутри Div
Я работаю над своим веб-сайтом портфолио, и у меня есть три горизонтальные секции, которые можно прокручивать автоматически (не включая этот код в 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;
}
Спасибо за ваше время.