Chi tiết bài viết Detail

Các bước thao tác

Thêm Link CSS và jquery Bootstrap popup

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

Thêm html Link khi nhấn sẽ scroll với nội dung

<a data-toggle="modal" data-target="#myModal" data-section="section-1" tabindex="1"> Launch modal 1</a>
<a data-toggle="modal" data-target="#myModal" data-section="section-2" tabindex="2"> Launch modal 2</a>
<a data-toggle="modal" data-target="#myModal" data-section="section-3" tabindex="3"> Launch modal 3</a>

Thêm html tạo popup bootstrap

<!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close"
                    data-dismiss="modal">&times;</button>
            </div> <!-- Modal body -->
            <div class="modal-body">
                <div id="section-1">
                    <h1>section-1</h1>
                    <div class="red"></div>
                </div>
                <div id="section-2">
                    <h1>section-2</h1>
                    <div class="green"></div>
                </div>
                <div id="section-3">
                    <h1>section-3</h1>
                    <div class="blue"></div>
                </div>
            </div> <!-- Modal footer -->
            <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Thêm Jquery để nhấn vào chạy nội dung

$(document).ready(
    function () { 
        $('#myModal').on('shown.bs.modal', function (event) { 
            // reset the scroll to top 
            $('#myModal .modal-body').scrollTop(0); 
            // get the section using data 
            var section = $(event.relatedTarget).data('section'); 
            // get the top of the section 
            var sectionOffset = $('#' + section).offset().top - 100; 
            //scroll the container 
            $('#myModal .modal-body').animate({ scrollTop: sectionOffset}, "slow"); 
        }); 
    }
);

Ví dụ