SleekScroll, SafariAssist, and Adaptive Navigation

Question

SleekScroll, SafariAssist, and Adaptive Navigation

I have a few queries regarding this side here

Is there a way to implement smooth scrolling? I've experimented with different options, but removing the .slim from jquery breaks the dropdown functionality. How can I resolve this issue?
I encountered compatibility issues with the Bootstrap Nav in Safari. How can I ensure it works smoothly in Safari as well?
On mobile, I noticed a glitch with the responsive Nav icon. The navigation opens when clicked, but it fails to close when selecting a topic. How can I make sure the navigation closes after selecting a topic?

Thank you Greats Udis

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Test123</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#About">About <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#Image">Image</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#Save">Save</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          More
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Test1</a>
          <a class="dropdown-item" href="#">Test2</a>
          <a class="dropdown-item" href="#">Test3</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#Contact">Contact</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

<section id="About">
  <h1>About</h1>
  <p>Lorem ipsum dolor sit amet, .... (Remaining content unchanged) ....
  ...
  consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>
... (Remaining sections unchanged)

</body>
</html>

html css bootstrap-4 smooth-scrolling responsive-nav

Answer 1

Answer №1

To prevent the default "jump" behavior of browsers when clicking on anchor links, you can add a code snippet for smooth scrolling effect:

https://jsfiddle.net/ecL3t6h5/

I made a modification to your jQuery code to use the regular version as the slim version doesn't support the animate() function.

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a.nav-link").on('click', function(event) {

    // Check if the anchor link has a valid hash value
    if (this.hash !== "") {
      // Prevent the default behavior of anchor links
      event.preventDefault();

      // Store the hash
      var hash = this.hash;

      // Use jQuery's animate() method for smooth scrolling
      // The optional number (800) specifies the duration in milliseconds for the scrolling animation
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add the hash to the URL after scrolling (default behavior)
        window.location.hash = hash;
      });
    } // End if
  });
  
  
  // Close navbar on link click
  $(".navbar-nav li a:not(.dropdown-toggle)").on('click', function() {
    $(".navbar-collapse").removeClass("show");
  });
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <!-- Bootstrap CSS -->

Attribution: https://www.w3schools.com/howto/howto_css_smooth_scroll.asp

Answer 2

To prevent the default "jump" behavior of browsers when clicking on anchor links, you can add a code snippet for smooth scrolling effect:

https://jsfiddle.net/ecL3t6h5/

I made a modification to your jQuery code to use the regular version as the slim version doesn't support the animate() function.

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a.nav-link").on('click', function(event) {

    // Check if the anchor link has a valid hash value
    if (this.hash !== "") {
      // Prevent the default behavior of anchor links
      event.preventDefault();

      // Store the hash
      var hash = this.hash;

      // Use jQuery's animate() method for smooth scrolling
      // The optional number (800) specifies the duration in milliseconds for the scrolling animation
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add the hash to the URL after scrolling (default behavior)
        window.location.hash = hash;
      });
    } // End if
  });
  
  
  // Close navbar on link click
  $(".navbar-nav li a:not(.dropdown-toggle)").on('click', function() {
    $(".navbar-collapse").removeClass("show");
  });
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <!-- Bootstrap CSS -->

Attribution: https://www.w3schools.com/howto/howto_css_smooth_scroll.asp

SleekScroll, SafariAssist, and Adaptive Navigation

Answer №1

Similar questions

Placing a pseudoelement amidst the track and thumb of a range input type

Elements with absolute positioning are preventing drag events from executing

Angular app - static List mysteriously clears out upon refresh

TinyMCE file multimedia upload feature allows users to easily add audio, video

How is it possible that I am still receiving spam emails even though I have already implemented reCaptcha

What is the best way to align the items in two lists at the center as if they were all individual

Creating a mesmerizing parallax effect for your image: A step-by-step guide

Incorporating Google Maps into Bootstrap 4.2.1 for seamless integration

Display a JSON object on a web browser

How can I retrieve the width of a responsive React element during its initial rendering phase?

What steps can be taken to ensure an animation does not continually reset to its original state when run infinitely?

Guide to displaying Fontawsome icons with CSS2D Renderer/Object

Adjusting Headers Using Buttons

Is there a workaround utilizing calc() and vh specifically for Chrome browsers?

Guide on utilizing regular expressions to match CSS selectors

Utilizing negative margins in Bootstrap for row positioning

Tips for creating custom CSS to target a specific element within a group of similar elements

The JavaScript functions are not loading within the onload event handler

Incorporating an external HTML page's <title> tag into a different HTML page using jQuery

Struggling to achieve success in redirecting with passport for Facebook