Modal Bootstrap - Navigate element within modal

Question

It is a simple modal with large text.

Follows the code:

<div class="modal fade">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Aqui tem um texto grande.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

In modal-body, I did not put text, because it gets too big.

At the end of the text there is a button, when clicking the button, I want it to navigate to at the beginning of the text using element or id or class.

Does anyone know that there is this way of doing using javascript ?

Answer 1

Would that be:

$(function(){
  $(".modal").modal();
  $("[data-toggle='modaltop']").click(function(){
    $(".modal").animate({ scrollTop: 0 }, "slow");
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="modal fade">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate interdum leo, sed hendrerit ipsum suscipit at. Etiam cursus sapien a leo tincidunt, id consequat dolor lacinia. Maecenas a bibendum massa. Aliquam erat volutpat. Proin vel nulla dui. Mauris eget enim pharetra, rutrum ex sed, aliquet neque. Sed velit enim, posuere in neque vel, mollis tristique mi.

Donec nulla erat, pulvinar in ipsum at, rutrum ornare sapien. Suspendisse at ligula sed nibh ornare efficitur. Quisque at convallis lectus. Integer vitae enim enim. Phasellus scelerisque justo a finibus tincidunt. Pellentesque sollicitudin orci nec velit viverra, vitae ultricies nibh gravida. Integer lacinia luctus mauris, non ornare mi fermentum in. Pellentesque eu dui facilisis, rutrum tellus cursus, tristique ante. Maecenas viverra erat et justo pellentesque tincidunt non eget metus. Phasellus ut molestie turpis, vel bibendum sem. Phasellus ac nisl imperdiet, faucibus diam quis, lacinia quam. Nullam vulputate egestas tellus eu faucibus. Nam mattis dapibus justo, et rhoncus mi rhoncus quis. Donec in euismod augue. Integer velit orci, ultrices ut faucibus non, elementum eget erat.

Suspendisse laoreet dictum lorem, a consequat nunc vehicula ac. Aenean mi massa, porta a ipsum at, placerat feugiat elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sed finibus ante, a viverra mi. Duis at convallis libero. Ut congue diam est, vitae facilisis nulla pharetra non. Aliquam non massa porttitor, rhoncus lorem ut, euismod metus. Donec aliquet sapien non varius cursus. Cras mattis auctor nunc non dignissim. Fusce vehicula neque risus. Cras et mauris ipsum. Cras dolor leo, malesuada eu cursus id, ullamcorper sed mauris.

Sed elementum aliquet nisl, sed pellentesque turpis pretium non. Donec non eros quis nulla efficitur facilisis sit amet in velit. Donec justo orci, sagittis at varius in, elementum nec dui. Integer quis efficitur arcu, sed consectetur tortor. Donec dignissim nulla vitae eros consectetur tempus. Aenean iaculis sit amet mi non elementum. Integer tempor vulputate ipsum, nec vestibulum lectus posuere vel. Morbi id ex eu turpis fermentum tempus id in nunc. In mollis est a magna egestas, non ultrices felis interdum. Cras tempus eros neque, non pharetra sapien rutrum vitae. Proin vestibulum, leo ultricies aliquet aliquet, ex justo elementum dui, a ultrices metus lacus at nunc. Aenean vitae viverra neque, sit amet placerat massa. Aenean et enim ex. Sed id purus eget eros iaculis rutrum eget id sem. Mauris erat erat, pharetra id cursus eget, facilisis a erat.

Ut in mi accumsan, hendrerit magna sed, semper ligula. Proin vestibulum risus in orci luctus, feugiat aliquet ex blandit. Sed in dignissim nulla. Quisque quis accumsan nisl, sed sodales eros. Cras fringilla elit nec est suscipit, vel luctus enim pellentesque. Mauris tristique ultricies augue, tempus facilisis ex auctor non. Phasellus scelerisque nibh eros, at mollis mi congue efficitur. Phasellus tempor dictum justo, eget vestibulum ex. Praesent dignissim, risus a tempor varius, ex ligula ornare nulla, sit amet maximus felis dolor vitae justo. Nunc auctor dapibus tincidunt. Phasellus mi enim, luctus in placerat rhoncus, ultrices eu tortor. Pellentesque eu eros in nisl venenatis laoreet. Donec a volutpat enim.

Nullam ut nisi ex. In hac habitasse platea dictumst. Maecenas ullamcorper eget velit ut sollicitudin. Aliquam tempus at turpis eget tempus. Suspendisse sed ipsum nec est condimentum elementum eget in lorem. Phasellus pharetra, enim id suscipit consectetur, diam libero facilisis sem, vel rutrum sem elit non libero. Maecenas elementum nisi non tellus ornare posuere. Quisque ac diam in dolor hendrerit mollis sed eu magna. Aliquam et convallis leo. Pellentesque dictum lorem sapien, mollis viverra enim egestas sed.

Sed mattis venenatis porttitor. Cras sodales nisi a mattis laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac enim est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur justo erat, malesuada et ultricies id, gravida non dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam accumsan nec lectus vel sodales. Nullam nec euismod sapien, vel pharetra lacus. Aliquam maximus lacus lectus, a molestie leo tempor in. Morbi justo sem, dignissim eget nisl eu, sagittis ullamcorper nisi. Maecenas ultricies metus luctus, eleifend nibh vitae, hendrerit leo. Phasellus a maximus ligula. Suspendisse iaculis efficitur neque eu tempor. Maecenas imperdiet maximus nisi mollis congue.

Mauris porttitor dolor eu nisl gravida dignissim id ut velit. Vestibulum molestie odio vehicula tristique ultricies. Morbi ultricies feugiat mauris, euismod vulputate elit pulvinar id. Ut quis dictum massa, sit amet mollis felis. Sed suscipit mi in sem pellentesque dictum. Phasellus facilisis eu turpis nec dignissim. Donec ornare dolor sed nibh posuere tempus. Maecenas at mauris facilisis, elementum libero feugiat, condimentum orci. Nam accumsan, ligula nec fermentum semper, neque nunc viverra arcu, ut dapibus nunc nunc vitae ex. Praesent euismod laoreet nisi, vel faucibus massa blandit sollicitudin. Sed est ex, maximus vel lorem et, imperdiet laoreet metus.

Pellentesque ipsum enim, cursus sit amet metus in, dignissim varius ante. Fusce sed ligula gravida, accumsan mauris id, fringilla metus. Curabitur quis est et eros euismod condimentum. Proin ullamcorper semper blandit. Aenean at diam vitae lorem euismod vulputate pulvinar et nisi. Integer scelerisque sollicitudin mauris vel congue. Curabitur odio nulla, suscipit vel elit quis, semper tincidunt leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Donec efficitur ex nec turpis imperdiet, sit amet ullamcorper sapien ullamcorper. Cras efficitur molestie turpis, vel rutrum orci placerat sit amet. Nulla magna turpis, imperdiet eu lectus sed, gravida porta enim. Mauris eget tortor ut urna placerat fringilla quis et nunc. Vivamus nec risus purus. Nam blandit hendrerit mauris, sagittis rutrum libero bibendum eu. Nam ultrices augue urna, rutrum ultrices odio elementum vel. Integer in leo a libero facilisis ultrices sit amet aliquam risus. Vivamus vel libero sollicitudin, dictum magna id, aliquet velit. Fusce vulputate vestibulum tristique. Maecenas non quam tristique, malesuada sem aliquam, feugiat ex. Vivamus dapibus neque in ligula tincidunt, ut eleifend dui fermentum.

Vestibulum facilisis diam eget risus egestas, at eleifend dolor posuere. Ut viverra consectetur justo et maximus. Suspendisse potenti. Nullam maximus, nulla congue pellentesque pretium, nisi quam efficitur elit, imperdiet vehicula sem nulla et ipsum. Suspendisse ac tellus ornare, rutrum risus id, finibus nulla. Etiam efficitur est sapien, in porttitor augue pharetra vitae. Cras aliquam elit nec lorem rutrum congue. Aliquam facilisis sodales ligula, at ornare ante gravida vitae. In hac habitasse platea dictumst. Pellentesque leo lacus, pulvinar at hendrerit efficitur, lobortis a ligula. Sed eleifend tincidunt congue.</p>
<button data-toggle="modaltop">Voltar ao topo</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</div>

Answer 2

What you can do is assign one id at the .modal-dialog and use it as an anchor.

There at the end of the text insert a link to this anchor.

Example:

<div class="modal-dialog" role="document" id="myAnchor">

And at the end of the text:

<a href="#myAnchor" class="scroll-top">Topo</a>

I created this codepen to demonstrate.