Designing with Bootstrap 4 involves incorporating a button that uses the data-toggle attribute set to "collapse" along with an href anchor linked to


I have attempted to link to an ID while also triggering a data-toggle collapse:

<a href="#id"  data-toggle="collapse" data-target="#collapseTwo" class="btn btn-primary" title="Something cool">Something very cool</a>

for linking to this specific spot 

<div id="id" class="col-12 col-lg-6"><h4>An awesome heading</h4></div>

and collapsing this section 

<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"><p>A plethora of amazing content</p></div>

The collapse feature works fine, however, the page does not automatically scroll down to the anchor point. I suspect the issue arises from using two IDs. Is there a simple solution to make it function as intended? Your input would be greatly appreciated.

Sincerely
Louis

htmlbuttonbootstrap-4anchor-scroll

Answer №1

If you want to automatically scroll to a specific element on your webpage, consider adding the following code to the opening a tag: 

onclick="document.getElementById('id').scrollIntoView();"
.

However, it is important to note that this solution may not be the most accessible option for all users.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When it comes to assigning a background to a div using jQuery and JSON

I have been experimenting with creating a database using only JSON and surprisingly, it worked once I added a "js/" in the URL. However, my current issue lies with CSS. Let me elaborate. Here is the JSON data: [ { "title":"Facebook", ...

javascriptjqueryhtmlcssjson

Pagination displays identical data on each page

When utilizing pagination in my AngularJS application to display search results fetched from an API call, I encountered an issue where the same data set appears on all pages. Here's what I have attempted: Within the Controller $rootScope.currentPag ...

htmlangularjspaginationcontroller

Troubleshooting Paths with Angular's NgFor Directive

Within my Angular project, I have implemented a basic ngFor loop to display logo images. Here is a snippet of the code: <div *ngFor="let item of list" class="logo-wrapper"> <div class="customer-logo"> & ...

htmlangulartypescript

Navigating with Angular router in a Bootstrap navigation bar

My link is not displaying as a tab (I'm using Bootstrap 4 and Angular 5). Instead, it shows up as just a plain link. This seems like it should be a simple issue, but this is my first time working with bootstrap... Thank you! <div> <nav cla ...

angularbootstrap-4angular-routerangular5

uniformly distribute the list items on the horizontal navigation bar

Does anyone know how to properly space out a ul in a navigation bar, with 5px padding on the right and left and the text evenly spaced in between? body { background: #ffffff; text-align: center; font-family: helvetica, arial, san ...

htmlcsshtml-listsmargin

Preventing Jquery Append from Adding Previous Elements

I am struggling to figure out how to display the star rating for each hotel individually. I have 5 hotels, each with a different star rating. Here is my Javascript code: function GetStarHotel() { var parent = $(' p.star '), imagePat ...

javascriptjqueryhtml

Is there a way to adjust my input value to correspond to December of 2022?

I am working on a project where I need to set a default month and year that the user cannot modify. They should only be able to change the date in December months. Any tips on how I can achieve this? <input id="input_date" type="date&qu ...

htmlcss

Two-toned diagonal design featuring a lone character

I'm searching for a unique design featuring the letter "d" in two colors, arranged diagonally without any gradient effects. Here is the CSS code I am currently using: .gradient_text_class { font-size: 72px; background-image: linear-gradient(50de ...

htmlcss

Enhance your PrimeNG p-calendar by customizing the background-color of the dates

Hello, I am currently attempting to customize the appearance of the p-calendar, but I am struggling with changing the color of the displayed dates. Can anyone provide assistance? Thank you in advance. Below is my template: <div class="p-field p-co ...

htmlcssangularprimengprimeng-calendar

Create a dynamic feature on a JSP page that allows users to click a button and instantly see changes

How can I create a button on an HTML or JSP page that, when clicked, will dynamically add content to the same page? For example, imagine I have a JSP page called Prescription.jsp with input forms like: ID name select commodity weight tolerance ...

htmljsp

What is the method for setting up vertical tabs?

Is it possible for someone to provide guidance on how to create vertical tabs for the HTML content below? When a tab, such as tab1 in the left column, is clicked, only the content of tab1 should be displayed in the middle column. The same applies for tab2 ...

jqueryhtmlcssjquery-ui

easy method for creating a hyperlink that triggers a "download" pop-up box

Is there a simple and efficient way to have some of my links trigger the 'save file as' prompt (similar to right-clicking) immediately after they are clicked for the first time? ...

phpjavascripthtmlcss

Highlight all the written content within the text box

I'm struggling with a piece of code that is supposed to select all the text inside an input field: <input id="userName" class="form-control" type="text" name="enteredUserName" data-ng-show="vm.userNameDisplayed()" data-ng-model="vm.enteredUs ...

javascripthtmlangularjs

Integrating blade code within blade code

Struggling to craft a button using the Form builder. {!! Form::button('<span style="color: {!! $colour[$i] !!}" class..') !!} The specific details of the button don't matter, all I wanted was to adjust the font color to $colour[$id]. Th ...

phphtmlcsslaravel-blade

Guide to triggering an event when two distinct keys are pressed simultaneously (Using HTML5 and Javascript)

I'm looking to have my character jump whenever I press any key on the keyboard. Is there a method to achieve this using "case..." functions? Thanks! Jordan ...

javascripthtmlcanvashtml5-canvaskeyevent

Challenges with locating text within the innerHtml property of a VB WebBrowser Object

Using Visual Studio 2010 with Visual Basic.NET In my project, I have created a form that utilizes a WebBrowser control to load an HTML file. Users are able to search for specific words or phrases within the document, prompting me to extract the innerHtml ...

htmlvb.netvisual-studio-2010

Transforming iframe programming into jquery scripting

Currently, I have implemented an Iframe loading the contents within every 5 seconds. It works well, however, there is a consistent blinking effect each time it loads which can be quite bothersome. I am looking to replace the iframe with a scrolling div so ...

javascriptphpjqueryhtmliframe

How can an external style sheet be inserted into an iframe?

My website features an editor on one side and an iframe on the other. Currently, anytime HTML code is entered into the editor and a keyup event occurs, the iframe updates automatically. I am looking to add default styling to the code entered in the editor ...

javascripthtmlcssiframe

Ensure that the div extends to the bottom of the page

I'm currently working on a web design assignment for one of my courses, and I'm facing some challenges with getting the div elements to span the entire page in terms of color. http://jsfiddle.net/vmm1s4Lt/ http://codepen.io/bmxatvman14/pen/fih ...

htmlcss

Issue encountered when integrating AJAX with PHP and HTML5 form

I've been working on solving a puzzle involving a contact form that uses AJAX and PHP. I decided to try reverse engineering the PHP code from this page (). However, when testing it out, the message gets stuck at "sending message...." after clicking "S ...

phpajaxhtmlcontact-form