Navigate to a specific section of the page by scrolling when linked to an id

Question

Navigate to a specific section of the page by scrolling when linked to an id

Just getting started with web development and using Bootstrap to build this site.

I'm working on a single-page site where the top navbar directs users to specific IDs. The issue I'm facing is that I want the page to scroll to the ID when clicked (similar to this example). Additionally, I'd like to apply an 'active' class when the user scrolls past a certain ID.

Not sure where to begin, but here's my HTML code:

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="34">
<div class="container">
<div class="navbar-collapse collapse navbar-responsive-collapse" id="main-menu">
<ul class="nav navbar-nav">
<li class="active"><a href="#whatissm">What We Are</a></li>
<li class=""><a href="#whyusesm">Why Us</a></li>
<li class=""><a href="#whatdoessmeoffer">What We Offer</a></li>
<li class=""><a href="#contactus">Contact Us</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<li><a href="#">Right Link</a></li>
</ul>
</div>
</div>
</nav>

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

To create a smooth scroll animation, you can use the function provided below. If you want to add the 'active' class to the previous ID, refer to @ahb's answer. In this function, I have included a variable reduce that deducts 50px from the actual offset.

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
  var reduce = 50;
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - reduce
        }, 1000);
        return false;
      }
    }
  });
});

SOURCE

DEMO

Answer 2

To create a smooth scroll animation, you can use the function provided below. If you want to add the 'active' class to the previous ID, refer to @ahb's answer. In this function, I have included a variable reduce that deducts 50px from the actual offset.

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
  var reduce = 50;
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - reduce
        }, 1000);
        return false;
      }
    }
  });
});

SOURCE

DEMO

Answer 3

Answer №2

When utilizing JQuery:

If you want to scroll and animate to a specific ID, refer to the link here.

To include a class after passing a certain ID while scrolling, this code can be used:

// Storing the window and all content as variables 
// instead of repeatedly fetching them from the DOM during each scroll

var $window = $(window),
    $content = $('.content');

$window.scroll(function () {
    $content.each(function () {
        // For every element with the class 'content'
        // checking its position and adding 'SomeClass' accordingly
        if ($window.scrollTop() >= $(this).position().top) {
            $(this).addClass('SomeClass');
        } else if ($window.scrollTop() <= $(this).position().top) {
            // Removing the class if window position is less than the element's position
            $(this).removeClass('SomeClass');
        }
    });
});

Answer 4

When utilizing JQuery:

If you want to scroll and animate to a specific ID, refer to the link here.

To include a class after passing a certain ID while scrolling, this code can be used:

// Storing the window and all content as variables 
// instead of repeatedly fetching them from the DOM during each scroll

var $window = $(window),
    $content = $('.content');

$window.scroll(function () {
    $content.each(function () {
        // For every element with the class 'content'
        // checking its position and adding 'SomeClass' accordingly
        if ($window.scrollTop() >= $(this).position().top) {
            $(this).addClass('SomeClass');
        } else if ($window.scrollTop() <= $(this).position().top) {
            // Removing the class if window position is less than the element's position
            $(this).removeClass('SomeClass');
        }
    });
});

Navigate to a specific section of the page by scrolling when linked to an id

Answer №1

Answer №2

Similar questions

Node JS promise predicaments

React SlideMenu will not close when a link is clicked

Import a new JavaScript file and access a variable

JQuery's .ajax function often triggers the success callback before the page it is calling

Leveraging the power of THREE.js TransformControls

The copyFileSync function is failing to copy the file without generating any error messages

Animating HTML elements based on the user's scrolling position

Searching for related values in a nested array of objects using JavaScript: A guide

What is the best way to adjust the position of the left-aligned button on an HTML table so that it

Calculate the dimensions of each list item and dynamically increase the size of the unordered list with jQuery

How can you transfer a function to another function within the render return statement?

Equal Sized <li> elements within Bootstrap Cards

Use an if statement in Angular to conditionally add a title attribute with an empty value to HTML

Is there a directive in AngularJS that allows for binding HTML templates using ng-bind-html

Ways to adjust your selection to the space or new line before or after

Using Javascript to prevent css from changing the display

Can you provide an update on the progress of the JavaScript target development in antlr3?

The Handsontable popup autocomplete editor is unfortunately truncated by the horizontal scrollbar

Viewing information from the database without the need to refresh the page

Combine multiple key values from an array of objects into a single array