content logo

Bootstrap Forms:

Bootstrap Navigate to Anchor Inside Collapsed Element

The navigation bar is one of the most critical factors on many websites and professional people always use this element on their pages. So, you can apply it on your website if you have one. Look at this post and realize its importance. The Bootstrap Navigate to Anchor Inside Collapsed Element has all the needed features for different kinds of websites. By using this JavaScript Auto Scrolling Code, you can increase the attractiveness of your website. As you see in this post, this Bootstrap Anchor Link has a unique design that attracts anyone’s attention.

The main theme of this Anchor Link to Text is blue. Therefore, you can use it on your page if you have a website with a blue theme. There is a field tab at the top of the page with blue background and white writing. If you put the mouse on this part, its background becomes a little darker. After clicking on this section, the page automatically scrolls down and its text appears. The writings of this HTML Scroll by Click are black and its title is bold. This code has a blue border that makes the mentioned page more attractive.

#

Javascript Auto Scrolling Code

#

Bootstrap Anchor Link

#

Anchor Link to Text

#

HTML Scroll by Click


<!-- This script got from frontendfreecode.com -->
<div class="min-vh-100 bg-primary">
    <section class="container py-5">
        <div class="row">
            <div class="col-md-6 mx-auto">
                <div class="card card-body">
                    <a class="btn btn-primary btn-collapse-target" data-collapse-target="#connect-container" href="#connect">Click Me</a>
                    <div class="space"></div>
                    <div id="connect-container" class="collapse">
                        <h1 id="connect">Connect with me</h1>
                        <p>
                            Bacon ipsum dolor amet porchetta cow strip steak chuck pig 								kevin ham short ribs capicola meatball flank alcatra. Bresaola 							   leberkas capicola pancetta drumstick meatloaf buffalo kielbasa 							  sirloin turkey turducken pork belly. Hamburger beef kevin pork 							 corned beef drumstick ground round sirloin meatball shoulder t-							bone. Sausage hamburger kiel basa, doner ribeye pastrami strip 							   steak brisket pork belly leberkas pig frankfurter pork swine.
                        </p>
                        <p>
                            Bacon ipsum dolor amet porchetta cow strip steak chuck pig 								kevin ham short ribs capicola meatball flank alcatra. Bresaola 							   leberkas capicola pancetta drumstick meatloaf buffalo kielbasa 							  sirloin turkey turducken pork belly. Hamburger beef kevin pork 							 corned beef drumstick ground round sirloin meatball shoulder t-							bone. Sausage hamburger kiel basa, doner ribeye pastrami strip 							   steak brisket pork belly leberkas pig frankfurter pork swine.
                        </p>
                        <p>
                            Bacon ipsum dolor amet porchetta cow strip steak chuck pig 								kevin ham short ribs capicola meatball flank alcatra. Bresaola 							   leberkas capicola pancetta drumstick meatloaf buffalo kielbasa 							  sirloin turkey turducken pork belly. Hamburger beef kevin pork 							 corned beef drumstick ground round sirloin meatball shoulder t-							bone. Sausage hamburger kiel basa, doner ribeye pastrami strip 							   steak brisket pork belly leberkas pig frankfurter pork swine.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.space {
  height: 1000px;
}
var btnCollapseTarget = document.querySelectorAll('.btn-collapse-target');
if (btnCollapseTarget) {
	btnCollapseTarget.forEach(function (el) {
		el.addEventListener('click', function (e) {
			var collapseTarget = document.querySelector(el.getAttribute('data-collapse-target'));

			if (!collapseTarget.classList.contains('show')) {
				e.preventDefault();

				var collapseTargetContainer = bootstrap.Collapse.getInstance(collapseTarget) ? bootstrap.Collapse.getInstance(collapseTarget) : new bootstrap.Collapse(collapseTarget, { toggle: false });
				collapseTargetContainer.show();

				collapseTarget.addEventListener('shown.bs.collapse', function (e) {
					document.querySelector(el.getAttribute('href')).scrollIntoView();
				});
			}
		}, false);
	});
}
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js'></script>
<style>
.space {
  height: 1000px;
}
</style>

</head>
<body>
<div class="min-vh-100 bg-primary">
    <section class="container py-5">
        <div class="row">
            <div class="col-md-6 mx-auto">
                <div class="card card-body">
                    <a class="btn btn-primary btn-collapse-target" data-collapse-target="#connect-container" href="#connect">Click Me</a>
                    <div class="space"></div>
                    <div id="connect-container" class="collapse">
                        <h1 id="connect">Connect with me</h1>
                        <p>
                            Bacon ipsum dolor amet porchetta cow strip steak chuck pig 								kevin ham short ribs capicola meatball flank alcatra. Bresaola 							   leberkas capicola pancetta drumstick meatloaf buffalo kielbasa 							  sirloin turkey turducken pork belly. Hamburger beef kevin pork 							 corned beef drumstick ground round sirloin meatball shoulder t-							bone. Sausage hamburger kiel basa, doner ribeye pastrami strip 							   steak brisket pork belly leberkas pig frankfurter pork swine.
                        </p>
                        <p>
                            Bacon ipsum dolor amet porchetta cow strip steak chuck pig 								kevin ham short ribs capicola meatball flank alcatra. Bresaola 							   leberkas capicola pancetta drumstick meatloaf buffalo kielbasa 							  sirloin turkey turducken pork belly. Hamburger beef kevin pork 							 corned beef drumstick ground round sirloin meatball shoulder t-							bone. Sausage hamburger kiel basa, doner ribeye pastrami strip 							   steak brisket pork belly leberkas pig frankfurter pork swine.
                        </p>
                        <p>
                            Bacon ipsum dolor amet porchetta cow strip steak chuck pig 								kevin ham short ribs capicola meatball flank alcatra. Bresaola 							   leberkas capicola pancetta drumstick meatloaf buffalo kielbasa 							  sirloin turkey turducken pork belly. Hamburger beef kevin pork 							 corned beef drumstick ground round sirloin meatball shoulder t-							bone. Sausage hamburger kiel basa, doner ribeye pastrami strip 							   steak brisket pork belly leberkas pig frankfurter pork swine.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
var btnCollapseTarget = document.querySelectorAll('.btn-collapse-target');
if (btnCollapseTarget) {
	btnCollapseTarget.forEach(function (el) {
		el.addEventListener('click', function (e) {
			var collapseTarget = document.querySelector(el.getAttribute('data-collapse-target'));

			if (!collapseTarget.classList.contains('show')) {
				e.preventDefault();

				var collapseTargetContainer = bootstrap.Collapse.getInstance(collapseTarget) ? bootstrap.Collapse.getInstance(collapseTarget) : new bootstrap.Collapse(collapseTarget, { toggle: false });
				collapseTargetContainer.show();

				collapseTarget.addEventListener('shown.bs.collapse', function (e) {
					document.querySelector(el.getAttribute('href')).scrollIntoView();
				});
			}
		}, false);
	});
}
</script>

</body>
</html>
Preview