Launch the modal and automatically navigate to a designated DIV

I am trying to open a modal window with a link and scroll to a specific DIV inside it.

HTML: 

<a href="#teamMembers" data-toggle="modal" class="teamMemebrScroll1">read more</a>
<a href="#teamMembers" data-toggle="modal" class="teamMemebrScroll2">read more</a>
<a href="#teamMembers" data-toggle="modal" class="teamMemebrScroll3">read more</a>

<div class="portfolio-modal modal fade" id="teamMembers" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
      <div class="container" data-id="teamMemebrScroll1">....</div>
      <div class="container" data-id="teamMemebrScroll2">....</div>
      <div class="container" data-id="teamMemebrScroll3">....</div>
</div>

JS: 

// scroll to team member 2
jQuery(document).ready(function ($) {
  $(".teamMemebrScroll2").click(function (event) {
      event.preventDefault();
      $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000);
  });
});

Although the modal is opening correctly, I am encountering an issue where it always scrolls back to the top instead of the intended location.

htmlcssmodal-dialogbootstrap-modal

Answer №1

  1. Instead of targeting the $('html,body'), focus on scrolling to content within the modal itself when it opens by using $('modalselector')
  2. Avoid creating multiple unnecessary click events and achieve the same outcome by utilizing BS modal event function through adding additional data attributes in the modal trigger button. Refer to this link for more information.

I have made some modifications to the Modal trigger button, introducing a data attribute data-id and eliminating the need for the click event that you were attempting.

<a href="#teamMembers" data-toggle="modal" data-id="teamMemebrScroll1" class="teamMemebrScroll1">read more</a>
<a href="#teamMembers" data-toggle="modal" data-id="teamMemebrScroll2" class="teamMemebrScroll2">read more</a>
<a href="#teamMembers" data-toggle="modal" data-id="teamMemebrScroll3" class="teamMemebrScroll3">read more</a>

Incorporate the BS modal event function as well:

$('#teamMembers').on('shown.bs.modal', function (e) {
    var id = $(e.relatedTarget).data('id'); // Retrieve modal button's data-id upon modal display
});

You've already added data attributes data-id to elements within the modal:

<div class="container" data-id="teamMemebrScroll1">....</div>
  <div class="container" data-id="teamMemebrScroll2">....</div>
  <div class="container" data-id="teamMemebrScroll3">....</div>

All you need to do now is match the modal button's data-id with the corresponding element's data-id inside the modal and scroll to it when the modal opens:

$(document).ready(function () {
        $('#teamMembers').on('shown.bs.modal', function (e) {
        var id = $(e.relatedTarget).data('id'); // Modal button's data-id
        var team = $('.container[data-id="' + id + '"]'); // Element's data-id matching the modal button's data-id
        $(this).animate({ // Modal
            scrollTop: team.offset().top // Scroll to the element
        }, 1000);
    });
});

Check out this Fiddle Working Example

If you desire greater control over scrolling using the same approach mentioned above, I came across a small script that may offer better results. Take a look at the following:

Fiddle with Scroll Top plugin

Answer №2

When you open the window, make sure to click on a link first. This link will take you to the specific div called "teamMembers"

<a href="#TeamMembers" ... />

To navigate to the "teamMembers" section using PHP, use the following code:

<?php
   header('Location: #TeamMembers');
?>

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

Creating distinct identifiers for table cells utilizing the map function

Is there a way to assign a unique id to each MenuItem using the map() function nested within another one? <table className={classes.table}> <thead> <tr> <td /> {sit.sit.map(sit => ( <td className={ ...

javascripthtmlreactjsmaterial-uijsx

Create a layout with two rows of two buttons in HTML aligned to the right side while maintaining the left side's

I am currently working on designing a menu for my webpage that includes four buttons. My goal is to have two buttons displayed at the top of the page and two buttons displayed at the bottom. To achieve this, I have written the following CSS code: .navButt ...

javascripthtmlcss

JavaScript button for displaying and hiding all content in one click

I came across a tutorial on W3Schools that showed how to create collapsibles, and I thought it would be great to have buttons that could expand or collapse all at once. I've been trying to implement this feature using the code provided in the tutorial ...

javascripthtmlcss

Utilize ASP to gather information from bulletin board systems

Hey there! I am a beginner in ASP programming and I am looking to extract data from a specific bbs link: http://sports.williamhill.com/bet/en-gb/betting/y/5/tm/Football.html. My plan is to click a button that will take me to the page above and extract th ...

asp.nethtml

The validation process did not pass because of a manually inputted value

When a user selects a file, the filename value is automatically inserted into the fileName field. However, the validation fails because the field is still considered empty until at least one more character is added. How can I fix this issue? This is how t ...

htmlangularjsvalidation

Innovative sound system powered by React

I am working on implementing a music player feature on a website where users can select a song and have it play automatically. The challenge I am facing is with the play/pause button functionality. I have created all the necessary components, but there see ...

javascripthtmlreactjsreact-nativereact-hooks

What is the process behind the creation of the class or id fields in HTML for Gmail and Quora? How are these

When using Gmail: <tr class="zA yO" id=":1t4"> While on Quora: <span id="ld_zpQ1Cb_27965"> What is the purpose behind this and what specific tool do they employ to achieve it? ...

htmlcssgmail

Include images in the form of .png files within the td elements of a table that is dynamically generated in the index

I have successfully created a table using embedded JavaScript with the help of messerbill. Here is the code: <table id="Table1"> <tr> <th>Kickoff</th> <th>Status</th> <th>Country</th> < ...

javascripthtmlnode.jsejs

I'm looking to validate an input tag in HTML5 using JQuery. Can anyone help clarify this process for me?

New to JQuery and struggling with HTML5 input tag validation. On my page, I have an input tag like this: <input id="variazioneAnticipo" class="rightAlligned form-control" style="width:50%" type="number" step="0.01" /> and a button: <button id="va ...

javascriptjqueryhtmlforms

Aligning the H3 and Anchor tags at the bottom of the page

I am currently utilizing Bootstrap 3.0 and hoping to achieve a layout similar to this: Favorites Add I want the "Favorites" text to be aligned on the left and enclosed in an H3 tag, while the "Add" link is aligned on the right within an anc ...

csstwitter-bootstraptwitter-bootstrap-3

Dynamic menu bar accompanied by primary content

I'm facing an issue with my active navigation bar. Whenever I open the hamburger menu, the main content remains fixed and does not move along with the open navigation menu. I tried searching online for a solution but couldn't find anything helpfu ...

javascripthtmlcss

Issue encountered with jQuery nested hover events and the removeClass() function being triggered on mouseleave

I have a nested list structure that I am working with: <ul class="menu-wrapper"> <li> <a href="#">Menu item</a> <ul class="sub-menu"> <li> < ...

htmljquerycsshovernested-lists

Switching minimum and maximum input values based on a specific condition: A step-by-step guide

I am looking for a way to reverse the minimum and maximum values of two input elements that I have defined. Is there a way to achieve this using HTML or JavaScript (Angular)? Here is an example of what I am trying to do: <label> Width: < ...

javascriptangularjshtmlinput

Updating a Pandas Column in Python Using a for Loop

My lack of experience with web scraping is definitely showing as I am relatively new to this. The goal of my code is to scrape all the data from a webpage, which it does successfully. However, before the loop continues, I want pandas to write the current p ...

pythonphphtmlselenium-webdriverweb-scraping

What is the best way to ensure that the input submit element is only visible after the input checkbox element has been checked?

For a school project, I am attempting to create a simulated reCAPTCHA box. Although my code is complete, I would like the functionality to submit your response from the input fields above only after selecting the reCAPTCHA checkbox. Upon researching, it ap ...

javascripthtmlinputrecaptchaform-submit

divide a JSON list

Within this JSON array, there is a plethora of person data, each with their own specified type such as "hr" or "accounting". The structure of the JSON array is depicted below: { "0": { "id": "2", "name": "blabla", "type": "hr" ...

javascriptjqueryhtmljson

Changing the absolute layout to utilize floats

I am seeking guidance on a project I am currently working on and would greatly appreciate any help. Main Goal: The objective is to create a drag and drop CMS that allows users to draw elements on a grid and rearrange them as needed. The system will recor ...

javascriptjqueryhtmlcsscss-float

Having trouble with the JSFiddle dropdown button that is unresponsive to

I am currently in the process of developing a test drop-down menu. The open menu button functions correctly, however, the close button is unresponsive to clicking or hovering actions. Upon clicking the open menu button, it should make the other button visi ...

javascripthtmlcss

I'm just starting to delve into React and I am eager to transform my regular JavaScript code into a React format. However, I am not quite sure how to

In my React JavaScript, I am trying to insert some regular JavaScript code. I attempted to use the {} brackets, but it did not work as expected. import './App.css'; function App() { return ( <> <div className=" ...

javascripthtmlnode.jsreactjs

Is it possible to create a carousel using PHP and MySQL?

Is it really impossible? I'm determined to pull images from a MySQL database and create a carousel similar to the one showcased in this link: . However, my goal is to achieve this using only HTML, CSS, PHP, and MySQL. ...

phphtmlmysqlcsscarousel