Scrolling with jQuery to create a fixed navigation bar

I'm having an issue with my navbar on my website. I used CSS and jQuery to keep it fixed at the top, but now when I click on a menu item, it doesn't scroll to that section of the page. Can anyone help me troubleshoot this problem?

<header id="index-banner">
        <nav id="navigation" class="banner-header z-depth-0">
          <ul class="left hide-on-med-and-down">
            <li><a href="http://localhost/project/" class="head"><span>HOME</span></a></li>
            <li><a href="#location" class="head" id="loc"><span>LOCATIONS</span></a>
              <li><a href="faq.php" class="head"><span>FAQ</span></a></li>
            </li>
          </ul>
          <a href="" class="center brand-logo"><img src="img/logo/50.png" class="banner-logo" id="mylogo"></a>
          <ul class="right hide-on-med-and-down">
            <span><li><a href="#menu" class="head">MENU</a></li></span>
            <span><li><a href="contact.php" class="head">CONTACT US</a></li></span>
            <li><img src="img/tunnsingh/face.png" id="tunnsinghface"></li>
            <li>
              <h5 id="call" class="head"><span>989898XXXX</span></h5>
            </li>
          </ul>
          <a href="#" data-activates="slide-out" class="hide-on-large-only button-collapse">&nbsp&nbsp<i class="fa fa-bars"></i></a>
          <div id="slide-out" class="side-nav hide-on-large-only">
          <img src="img/logo/50.png" id="side-nav-logo">
          <img src="img/divider/green.png" class="divide">
            <ul>
              <span><li><a href="http://localhost/project">HOME</a></li></span>
              <span><li><a href="#location" id="locm">LOCATIONS</a></li></span>
              <span><li><a href="#menu">MENU</a></li></span>
              <span><li><a href="faq.php">FAQ</a></li></span>
              <span><li><a href="contact.php">CONTACT US</a></li></span>
            </ul>
          </div>
        </nav>
        <img src="img/banner.jpg" class="hide-on-large-only" id="index-banner">
      </header>

javascriptjqueryhtmltwitter-bootstrapcss

Answer №1

To properly navigate through different sections on a webpage, you need to assign each section an "id" attribute and then utilize the "scrollTop" function in order to smoothly scroll to those specific sections.

Example of HTML Code:

<a href="#target-element" class="scroll_to">Scroll to Target Element</a>

<section id="target-element">Content within Target Element</section>

Implementation using jQuery:

jQuery('.scroll_to').click(function(e){
    var jump = $(this).attr('href');
    var new_position = $(jump).offset();
    $('html, body').stop().animate({ scrollTop: new_position.top }, 500);
    e.preventDefault();
});

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

Tips for implementing jQuery validation with CakePHP 3.0

Just starting out with Cake PHP and I have a question. Can someone show me how to implement custom validation using jQuery in Cake PHP 3.0? Here is the code from my add.ctp file: <h2>Add New User</h2> <!-- link to add new users page --&g ...

jquerycakephp-3.0

Display issue with ThreeJS cube

Currently, I'm delving into the world of ThreeJS and decided to incorporate the library into my existing NextJS project. My goal was simple - to display a cube on the front page. However, despite my best efforts, nothing seems to be appearing on the s ...

javascriptreactjsnext.jspythreejs

The useSelector value remains undefined within the handleSubmit button in a React component

Once a user fills out and submits the form, the action is triggered to call the API. Upon returning the postId, it is stored in the reducer. The main React component then utilizes useSelector to retrieve the latest state for the postId. However, when attem ...

javascriptreactjsreduxredux-thunk

Delete an item from an array when a dropdown selection is made

When dealing with Angular 8, I encountered a logic issue. There are two drop-down menus: First Drop-down The options in the first menu are populated from an array of objects Example Code, ts: {rs_id: "a5f100d5-bc88-4456-b507-1161575f8819", ...

javascriptarraysangularangular8

using a CSS tag to vertically center text within an element

After using a tag and setting the background color, height, and width for my content, I decided to align the text in the center along the x-axis using text-align: center;. However, I am now trying to figure out how to align it in the middle along the y-ax ...

csshtmltags

Passing arrow functions for input validation rules to the Stancil component in Vue

I am attempting to implement an arrow function as input rules, similar to the setup in Vuetify at https://vuetifyjs.com/en/api/v-input/#rules. My approach involves passing rules within an array using the following code: <body> <div id="ap ...

javascriptvue.jsvuejs2stenciljsvue-props

What is a more efficient way to avoid duplicating code in javascript?

Is there a way to avoid repeating the same code for different feeds? I have 8 feeds that I would like to use and currently, I am just incrementing variable names and feed URLs. <script type="text/javascript> function showFeed(data, content ...

javascriptjsonrss

Encountering a Typescript error when attempting to access the 'submitter' property on type 'Event' in order to retrieve a value in a |REACT| application

I am facing an issue with my React form that contains two submit buttons which need to hit different endpoints using Axios. When I attempt to retrieve the value of the form submitter (to determine which endpoint to target), I encounter an error while work ...

javascriptreactjstypescriptforms

Trouble Arising in Showing the "X" Symbol upon Initial Click in Tic-Tac-Toe Match

Description: I'm currently developing a tic-tac-toe game, and I've run into an interesting issue. When I click on any box for the first time, the "X" symbol doesn't show up. However, it works fine after the initial click. Problem Details: ...

javascripthtmlcssgame-development

Conceal part of the page initially, then reveal it when clicked

After integrating Rails 3 and JQuery, I encountered an issue where a div containing a rendered partial would not hide when attempting to do so using JQuery in my JavaScript. I want to be able to hide the div initially, then show it upon clicking a button. ...

javascriptjqueryajaxruby-on-rails-3

Enhance your input text form with a stylish button using Bootstrap

This is the code snippet I am currently working on: <h2>Workout Selector</h1> <div class="form-group"> <label for="workout-name">Search by Keywords (Comma Separated):</label> <input ...

csstwitter-bootstrapbutton

Building a dynamic hierarchical list in Angular 8 with recursive expansion and collapse functionality

I am attempting to construct a hierarchical expand/collapse list that illustrates a parent-child relationship. Initially, the parent nodes will be displayed. If they have children, a carat icon is shown; otherwise, a bullet icon appears. When the carat ico ...

htmlangulartypescript

Encountering CORS Error while trying to access Guest App in Virtualbox using Vue, Express, and Axios

I encountered an issue while trying to access my Vue app in Virtualbox from the host, both running on Linux Mint 20. Although I can now reach the login page from my host, I am consistently faced with a CORS error during login attempts: Cross-Origin Request ...

javascriptnode.jsvue.jsexpressvirtualbox

Issue with jQuery DataTable displaying content from the beginning of its text is not visible

I have utilized a jQuery DataTable to exhibit the roster of employees in a store. The framework of the table is as follows: <table class="gridTableSummary hover pretty cell-border" id="summarytable" cellspacing="0"> <thead class="col-h ...

jqueryjquery-uidatatabledatatables

Activation of navigation buttons in the Vue Full Calendar control the movement to the next and previous

In my current project, I am utilizing https://www.npmjs.com/package/vue-full-calendar. However, I have encountered an issue when trying to receive callbacks or triggers from the next and previous buttons on the calendar. My backend API is structured aroun ...

javascriptvue.jsvuejs2fullcalendar

Java - openpdf - Splitting words using hyphens

We are currently utilizing openpdf 1.3.26 template 2.1 to create PDFs from HTML and CSS. Within our coding, there is a div element styled as follows: .text-block{ display:block; text-align:justify; word-wrap: break-word; ...

javacsspdfhyphenationopenpdf

Choosing a recently inserted row in jqGrid

After reloading the grid, I am trying to select the newly added row, which is always added at the end. However, it seems impossible to do so after the reload. Is there a reliable way to select the last row after reloading the grid? The current code I have ...

javascriptjqueryjqgrid

angular index.html code displayed

I successfully deployed an Angular app on a server in the past without any issues. The Angular version is 6.1.1, Angular CLI version is 6.2.9, npm version is 6.13.4, and node version is 10.18.0 for both local and server environments. The server is running ...

htmlnode.jsangulargitnpm

Having trouble with the image compressor not being imported correctly in Next.js?

I've been attempting to compress an image, but when I try to import the ImageCompressor normally like this: import ImageCompressor from "image-compressor.js"; It throws an error: Uncaught ReferenceError: window is not defined This is the s ...

javascriptnext.jsimportimage-compression

Accessing attribute value of selected option in AngularJS select element

I have a select tag that displays options, and I want it so that when an option is selected, the value of the data-something attribute is copied into the input element. This is just for demonstration purposes; the actual value should be sent in the form. ...

javascriptangularjsangularjs-ng-change