Beta version of Bootstrap 4 - Enhancing User Experience with ScrollSpy Feature

I've encountered an issue getting my anchors to smooth-scroll to the target text. Despite trying jQuery solutions from various sources, nothing seems to work inexplicably.

Even ScrollSpy doesn't seem to do the trick. I'm currently working with this example of ScrollSpy SmoothScrolling courtesy of W3Schools.

Here's a glimpse at my markup:

<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <link rel="stylesheet" href="tbd.css">
  <link rel="stylesheet" type="text/css" href="css/hover-min.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Poppins" rel="stylesheet">
</head>

<body class="pattern-svg-background">
...
... (Abbreviated for brevity) ...
...
  <script src="js/tbdjs-main.js"></script>

</body>

</html>

I can't seem to figure out where things are going wrong in my implementation. Any insights or guidance would be greatly appreciated!

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

It feels odd. I'm not sure what I'm doing. A simple change in the CDN has magically fixed your code.

<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <link rel="stylesheet" href="tbd.css">
  <link rel="stylesheet" type="text/css" href="css/hover-min.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Poppins" rel="stylesheet">
</head>;

<body class="pattern-svg-background">
  <div class="col-xl-1-12|auto">
    <div id="top" class="jumbotron">
      <h1 class="display-3">Hey there, friend!</h1>
      <p class="lead">Choosing a browser can be overwhelming with so many options available. Let me help you make the right choice!</p>
      <hr class="m-y-md">
      <p>I'll walk you through the pros and cons of popular (and not-so-popular) browsers. Select your browser from the menu below!</p>
      <p class="lead">
        <nav class="navbar navbar-expand-md navbar-light bg-light rounded mb-3">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
          <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav text-md-center nav-justified w-100">
              <li class="nav-item">
                <a class="nav-link" href="#chrome"><i class="fa fa-chrome fa-fw" aria-hidden="true"></i>Google Chrome<span class="sr-only">(current)</span></a>
              </li>

              -More HTML elements and content here-

<footer class="bg-dark text-white mt-4">
    <div class="container-fluid py-3">
      <div class="row">
        <div class="col-md-3">
          <h4><a href="#top"><i class="fa fa-arrow-up"></i>Back to Top</a></h4>
        </div>
      </div>
  </footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('.nav-link').click(function() {
    var sectionTo = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $(sectionTo).offset().top
    }, 1000);
  });
});
</script>     

</body>

</html>

Answer №2

For those seeking a seamless scroll on navigation click event to specific sections, this can be accomplished without relying on external plugins.

View this [demo][1] for guidance.

Trust it proves beneficial.

[1]: https://jsfiddle.net/uniqueid123/samplecode/

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

Reactjs encountering issues with CSS loading correctly

Currently, I am working with reactjs and utilizing the Nextjs framework. All my "css, js, images" are stored in the "public" folder and have been included in "_app.js". However, whenever I attempt to load the "Main page" in a browser, the page does not d ...

javascriptnode.jsreactjsnext.js

Issues with Angular radio buttons are causing them to not be selected properly

When it comes to radio buttons, they should be checked based on certain conditions. <input data-ng-checked="user.contract1 || user.contract2" data-ng-model="user.agreed" type="radio" data-ng-value="true"> Yes <input data-ng-checked="!user.contrac ...

javascriptangularjsradio-button

Is it possible to delete the content within an iframe using jQuery or prototype.js?

Is there a way to display only a specific part of an iframe when a link is clicked? I have tried the following code using Prototype JS: //Prototype Js code Event.observe(window,'load',function(){ $('button').observe('click&a ...

jqueryprototypejs

Unusual styling: Unexpected CSS :after impact on card layouts in Bootstrap 4

I'm currently utilizing a Bootstrap 4 masonry card layout for a particular project, and within this project, there is a <select> element that has been styled with custom CSS properties. One of the customized styles includes a caret created using ...

csstwitter-bootstraptwitter-bootstrap-4column-count

Change the color of a cell in a mat-table

My mat-table has a basic column structure like this: <mat-table #table [dataSource]="dataSource" matSort> <ng-container matColumnDef="zone"> <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell> ...

htmlcssangularangular-material

Ways to divide background color in half using CSS

Looking for some help with CSS - I want to split an HTML page into two sections, with a background and text/login form on top. Can anyone provide sample CSS and HTML code? This is what I've tried so far in CSS: .logindiv { height: 200px; width: ...

htmlcssbackground

Shade the entire td column in different colors depending on the characteristics of th

I am working with a table and here is the code for it: <table> <thead> <tr> <th style="width: 40%; text-align: center; vertical-align: center;">Nr.<br> crt.</th> <th style="font-weight: bold; wi ...

javascripthtmljquerycsslaravel

Error occurred in AngularJS service due to incorrect data type

Looking to store the URL of a query in an AngularJS service like this: var mortgageloanService = angular.module('loanstreetIpadAppApp', []); mortgageloanService.factory('updateTable', function($http) { return { getParams: fun ...

javascriptangularjsangularjs-scope

Identify distinct keywords within a sentence

I have a challenge with two states that store data: one for an array of sentences called sentencesHard, and the other for an array of critical words named criticalWords. My goal is to highlight only the critical words within the sentences from sentencesHar ...

javascriptreactjs

How come my flex-box navigation bar is not collapsing as I shrink the browser window size?

I'm currently experimenting with FlexBox to enhance the design of my website, specifically focusing on creating a responsive and collapsible navigation bar for mobile users. I'm encountering issues with the flex commands in the .nbar class not wo ...

htmlcssflexbox

Create a script in ASP.NET and jQuery that allows for the dynamic addition of rows with text boxes and drop-down menus

By utilizing jQuery, we can dynamically create a row (i.e. the row with 2 dropdown and textbox) above the row when the user clicks the add box attribute without any post back. Users will have the freedom to add as many attributes as desired, and they can ...

asp.netjqueryjquery-selectors

What is the best way to incorporate an "if" statement into my code?

I'm in the process of setting up a section on my website where users can get live price estimates based on a value they input. While I have most of the formula in place, there's one final element that I need to figure out: introducing a minimum f ...

javascriptjquery

Dealing with an empty request.FILES using FileUploadParser in Django Rest Framework and Angular file upload technique

Uploading files in an angular view can sometimes be tricky, especially when using templates. The code snippet below shows how to upload multiple and single files using Angular File Upload library. Multiple <input type="file" name="file" nv-file-select= ...

javascriptdjangoangularjsdjango-rest-framework

AJAX request lacks the 'access-control-allow-origin' header

I'm currently integrating a weather API into my app to display real-time weather information. Although I've used this API before, I am now attempting to fetch the data asynchronously using AJAX to avoid full page reloads. Below is the JavaScrip ...

javascriptjqueryajax

Showing a Remote Image on the Screen

I have a 16x16 grid of thumbnail images and I'm trying to implement a feature where clicking on an image displays the full-sized version with a dimmed background. The full-sized image should appear to float above the background. I don't want to ...

javascriptjquery

When a function is transferred from a parent component to a child component's Input() property, losing context is a common issue

I have encountered an issue while passing a function from the parent component to the child component's Input() property. The problem arises when the parent's function is called within the child component, causing the this keyword to refer to th ...

javascriptangulartypescriptthis

Is it possible to identify an event on an input field that has been disabled using Angular?

I am attempting to retrieve an event when an input field becomes disabled. <input [disabled]='disableTextbox' (click)="delectInput()"> The code snippet above represents my input field. I am trying to capture the event that occurs ...

javascripthtmlangulareventsdetect

Tips on how to hide items from printing if they are not true in Vanilla JavaScript/TypeScript and Angular 9

How do I prevent interactions from being printed if the value is a number? ...

javascriptangulartypescript

CSS | Creating gaps between elements within a form

My form is currently inside a flexbox card with two sides - left and right. The left side displays a picture, while the right side contains the actual input fields. I'm looking to add more space between the different inputs as they feel too cramped at ...

htmlcssflexbox

How can I specifically disable the next month in MUI Datepicker?

Employing MUI version 5, how can I disable only the next month in the datepicker while keeping the others functional? ...

javascriptreactjs