Enhance your website's user experience with jQuery by implementing smooth scrolling alongside

Question

Enhance your website's user experience with jQuery by implementing smooth scrolling alongside

I have a fixed header at the top of my page. When it scrolls, I want to ensure that it does not cover or hide any of my content, especially the top portion of the section.

 // This code enables smooth scrolling (source: css-tricks)
$('a[href*="#"]:not([href="#"])').click(function() {

    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
            }, 1000);
            return false;
        }
    }
});

For example, you can view a screenshot here.

I have made some CSS changes by adding padding and margins, but I am not completely satisfied with the result.

If possible, I would like the height of the fixed header to act as a top offset.

You can see the desired result similar to what I want in this example image.

jquery html css

Answer 1

Answer №1

To adjust the smooth scrolling effect, simply add your header height after scrollTop: target.offset().top. For example, you can modify it like this:

scrollTop: target.offset().top-100

. Remember to determine your header height and set the appropriate offset value.

// Smooth scrolling script from css-tricks

$('a[href*="#"]:not([href="#"])').click(function() {

    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-100
            }, 1000);
            return false;
        }
    }
});

.header {
    position: fixed; 
    top:0; 
    left: 0; 
    right: 0; 
    background: #000; 
    height: 40px; 
    padding: 20px 40px;
}
a { 
    color: #fff; 
    float: left; 
    padding: 10px; 
}
.section { 
    height: 400px; 
    background: green; 
}
.section.add { background: red; }
.section.add3 { background: #000; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<div class="header">
    <a href="#section1">scroll</a>
</div>

<div class="section"></div>
<div class="section add" id="section1"></div>
<div class="section add3"></div>

Answer 2

To adjust the smooth scrolling effect, simply add your header height after scrollTop: target.offset().top. For example, you can modify it like this:

scrollTop: target.offset().top-100

. Remember to determine your header height and set the appropriate offset value.

// Smooth scrolling script from css-tricks

$('a[href*="#"]:not([href="#"])').click(function() {

    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-100
            }, 1000);
            return false;
        }
    }
});

.header {
    position: fixed; 
    top:0; 
    left: 0; 
    right: 0; 
    background: #000; 
    height: 40px; 
    padding: 20px 40px;
}
a { 
    color: #fff; 
    float: left; 
    padding: 10px; 
}
.section { 
    height: 400px; 
    background: green; 
}
.section.add { background: red; }
.section.add3 { background: #000; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<div class="header">
    <a href="#section1">scroll</a>
</div>

<div class="section"></div>
<div class="section add" id="section1"></div>
<div class="section add3"></div>

Answer 3

Answer №2

I finally found a solution to my issue by creating a new variable.

var fixedMenu = $('#fixedtopheader').height():

Instead of using scrollTop: target.offset().top - fixedMenu,

Everything is working perfectly now!

Answer 4

I finally found a solution to my issue by creating a new variable.

var fixedMenu = $('#fixedtopheader').height():

Instead of using scrollTop: target.offset().top - fixedMenu,

Everything is working perfectly now!

Answer 5

Answer №3

If you're looking for some code assistance, I've got you covered! Just follow this link: https://jsfiddle.net/6mujyLw3/. Within the code, each section is separated for easy navigation.

Here's the HTML snippet:

<div class="m1 menu">
<div id="menu-center">
    <ul>
        <li><a class="active" href="#home">Home</a>

        </li>
        <li><a href="#portfolio">Portfolio</a>

        </li>
        <li><a href="#about">About</a>

        </li>
        <li><a href="#contact">Contact</a>

        </li>
    </ul>
</div>
</div>
<div id="home">
  <h1>Home </h1>
</div>
<div id="portfolio">
   <h1>Portfolio</h1>
</div>
<div id="about">
  <h1>About</h1>
</div>
<div id="contact">
 <h1>Contact</h1>
</div>

And here's the accompanying CSS:

//CSS styles go here

Last but not least, the JavaScript functionality:

//JavaScript functions are defined in this part

Answer 6

If you're looking for some code assistance, I've got you covered! Just follow this link: https://jsfiddle.net/6mujyLw3/. Within the code, each section is separated for easy navigation.

Here's the HTML snippet:

<div class="m1 menu">
<div id="menu-center">
    <ul>
        <li><a class="active" href="#home">Home</a>

        </li>
        <li><a href="#portfolio">Portfolio</a>

        </li>
        <li><a href="#about">About</a>

        </li>
        <li><a href="#contact">Contact</a>

        </li>
    </ul>
</div>
</div>
<div id="home">
  <h1>Home </h1>
</div>
<div id="portfolio">
   <h1>Portfolio</h1>
</div>
<div id="about">
  <h1>About</h1>
</div>
<div id="contact">
 <h1>Contact</h1>
</div>

And here's the accompanying CSS:

//CSS styles go here

Last but not least, the JavaScript functionality:

//JavaScript functions are defined in this part

Enhance your website's user experience with jQuery by implementing smooth scrolling alongside

Answer №1

Answer №2

Answer №3

Similar questions

How to place a button in SwiperJs using React

No longer will popups be blocked

Rails does not transfer data-attributes in HTML5

Using HTML and JavaScript to verify email addresses

Enhance the size of dynamically generated svg elements by scrolling the mouse wheel in and out

Troubleshooting: The issue of receiving a 403 error when trying to access

Unconventional border effect while hovering over image within navigation container of Bootstrap

The HTML iframe is displaying blank content

What is the best way to organize a form's checkboxes into an array using Node.js?

Elements within the DIV tag are not displaying in a linear arrangement as intended

problem with the video pathway in the javascript document

Ending the loop of a jQuery JSON array when reaching the final row

Switch up the picture when you press on it

Easily center list item numbers vertically within fixed height containers

What is the best method to choose a random color for the background when a button is pressed?

What steps should I take to ensure my Bootstrap CSS3 code is error-free and W3C validated?

Struggling to concentrate on the branding

The never-ending loading problem at the bottom of the Firefox screen seems

Tips for disabling the default behavior by using preventDefault in JavaScript

Divs sliding out of alignment