1
I would like to put the smooth scroll effect by clicking on the "see more" of Collapse in the code below. I am using HTML, CSS, jQuery and Bootstrap.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Portfólio</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container title-h1">
<h1>Portfólio</h1>
</div>
<!-- Carrousel ---------------------------------------------------------->
<div class="container">
<div class="row carousel">
<div class="portfolio container col-lg-3">
<div class="card" style="width: 18rem;">
<h5>Nome Projeto</h5>
<div class="card-img-top"></div>
<a class="btn" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
<div class="card-body">
Veja mais
</div>
</a>
</div>
</div>
</div>
<div style="height: 500px"></div>
<div class="container collapse row" id="collapseExample">
<div class="container col-lg-4 col-md-4" id="ladoEsquerdo">
<h2 class="title-h2">Titulo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar et urna vitae porta. Integer venenatis nisi in nisi congue lobortis. Proin fermentum ut tortor eget facilisis. In nec felis vulputate, suscipit nisl non, blandit tellus. Nullam eget tortor urna. In dignissim lectus non dolor sodales molestie. Duis in vulputate augue, sed tristique sem. Donec commodo ex a elit tempor laoreet. Quisque tortor libero, lobortis id metus eu, dignissim efficitur nunc. Suspendisse eu lorem at urna volutpat sagittis. </p>
<a class="btn btn-primary" href="#">ACESSE O SITE</a><br>
<a class="btn btn-primary" href="#">CONHEÇA A HISTÓRIA</a>
</div>
<div class="container col-lg-8" id="ladoDireito">
<div class="row">
<div class="col-md-6" style="height:200px; background-color:white;"></div>
<div class="col-md-6" style="height:200px; background-color:gray; margin-left: 0px;"></div>
</div>
<div class="row" style="margin-top: 2px">
<div class="col-md-4" style="height:200px; background-color:blue; margin-right: px;"></div>
<div class="col-md-4" style="height:200px; background-color:white; margin-right: px;"></div>
<div class="col-md-4" style="height:200px; background-color:blue; margin-right: px;"></div>
</div>
<div class="row" style="margin-top: 2px">
<div style="width:100%;height:200px; background-color:gray; margin-right: px;"></div>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I edited the question because I had misplaced the information. I would like to scroll the page when the user clicks on "See more". I tried to do it but when I clicked to close the opening Collapse, the screen went down again bugging the screen.
Check out the Bootstrap Scrollspy to see if it helps. https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp
– Carlos Wagner
Dude is kind of confused his code to explain a little better effect, nor scroll has on the page...
– hugocsl
That’s not exactly what I wanted. The problem isn’t scrolling on the page the problem is scrolling with Collapse.
– user124107
@hugocsl I edited the question, I believe that now you can see straight.
– user124107
You want to scroll down the screen by clicking on "see more"?
– Sam
Yes, exactly. But only when the "modal" below is not open. When you click on the "see more" the first time it opens a box below and when you click for the second time the box below closes again and disappears. I would like when you click on "see more" to open the "modal" when it opens, the screen to make a smooth scroll until the "modal".
– user124107