Use jQuery to smoothly navigate to a designated pixel position by scrolling down the page

Question

Use jQuery to smoothly navigate to a designated pixel position by scrolling down the page

Is it possible to use jQuery to scroll down a page to a specific pixel?

I am currently working on a website with a fixed navigation bar that scrolls to an anchor point when a button is clicked, utilizing the jQuery smooth scroll plugin.

The issue I am facing is that the navigation bar overlaps the section, cutting off half of the text.

Given the rise in popularity of jQuery animated websites, I believe others may have encountered this problem before but I have been unable to find a solution.

I have integrated the Smooth Scroll plugin into the Wordpress site in question and the following code is located within the section:

<div id="web"></div>, <div id="app"></div>, <div id="seo"></div>

There are three sections in total that each button should scroll to.

Website URL: www.gogoblondie.com

javascript jquery html css

Answer 1

Answer №1

Forget about using weird plugins ;)
Here's a simple solution for you:

CHECK OUT THE LIVE DEMO

  <nav>
    <ul>
      <li><a href="#web">WEB</a></li>
      <li><a href="#app">APP</a></li>
      <li><a href="#seo">SEO</a></li>
    </ul>
  </nav>  

  <div id="web" class="page" style="margin-top:200px;">WEB</div>
  <div id="app" class="page">APP</div>
  <div id="seo" class="page">SEO</div>

CSS:

nav{ 
  position:fixed;
  top:0px;
  width:100%;
  height:200px;
  background:#cf5;
  z-index:2;
}
.page{ 
  position:relative;
  min-height: 800px; 
}

jQ:

var navHeight = $('nav').outerHeight();

$('nav a').click(function( e ){
  e.preventDefault();
  var myHref = $(this).attr('href');
  var newPos = $(myHref).offset().top;
  $('html, body').stop().animate({scrollTop: newPos-navHeight}, 1300);
});

Answer 2

Forget about using weird plugins ;)
Here's a simple solution for you:

CHECK OUT THE LIVE DEMO

  <nav>
    <ul>
      <li><a href="#web">WEB</a></li>
      <li><a href="#app">APP</a></li>
      <li><a href="#seo">SEO</a></li>
    </ul>
  </nav>  

  <div id="web" class="page" style="margin-top:200px;">WEB</div>
  <div id="app" class="page">APP</div>
  <div id="seo" class="page">SEO</div>

CSS:

nav{ 
  position:fixed;
  top:0px;
  width:100%;
  height:200px;
  background:#cf5;
  z-index:2;
}
.page{ 
  position:relative;
  min-height: 800px; 
}

jQ:

var navHeight = $('nav').outerHeight();

$('nav a').click(function( e ){
  e.preventDefault();
  var myHref = $(this).attr('href');
  var newPos = $(myHref).offset().top;
  $('html, body').stop().animate({scrollTop: newPos-navHeight}, 1300);
});

Answer 3

Answer №2

jQuery scrollTo is a fantastic plugin that allows smooth scrolling to a specified element while also offering an offset option.

Answer 4

jQuery scrollTo is a fantastic plugin that allows smooth scrolling to a specified element while also offering an offset option.

Use jQuery to smoothly navigate to a designated pixel position by scrolling down the page

Answer №1

Answer №2

Similar questions

What is the best way to position my h1 headings above my flexbox containers?

Click on all the links in the array to open them in separate tabs

The currency exchange script is malfunctioning and not functioning properly

Magnify novice mistakes: Unhandled promise rejection and Ensure every child has a distinct "key" property

IE displaying "slow script" alert due to Knockout malfunction

Ways to invoke a child component's function in React Native

Ways to ensure a div remains at the bottom of a page without using a wrapper

JSON Serialization of numeric data types

Tips on how to automatically rearrange a jQuery UI sortable list

Utilizing jQuery to process date input in a Rails form

From PHP to JavaScript, the looping journey begins

Within the mobile view, a button with accompanying description will be discreetly concealed

How to bring RxJS 6 into your browser?

What is the reason for the failure of this react ternary return statement?

Develop an innovative showcase page showcasing 151 individual profiles with React Router

Prepare the column data for Vue Good-Table by formatting it beforehand

Tooltip not appearing when user hovers over it

Generating URL parameters for Ajax requests on the fly

Storing a date in MySQL using Vue.js and Node.js

Switch between using the useState hook by toggling it with the MUI Switch