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

Access a webpage outside of your domain using htaccess and PHP functionality

Adjusting Font Size for Buttons on Mobile Devices in HTML

Disabling and enabling a link before and after an AJAX call using jQuery

retrieving an HTML webpage using an AJAX jQuery request

Check for compatibility of overflow:scroll with mobile browsers

Variable assigned by Ajax no longer accessible post-assignment

Tips for focusing on a background image without being distracted by its child elements

Learn how to set up webpack or Next.js to generate a CSS file from custom Material styles and automatically inject it into the header

The equivalent of the $.curCSS method in jQuery version 1.10 is as follows:

Ways to limit access to the jQuery AJAX method from the browser console window

Revealing elements with AngularJS ng-show directive prior to concealing them

What is the solution to incorporating a scrollbar in a popup when I increase the zoom level?

Differences between applying addClass(undefined) and addClass(null)

Implementing automatic line breaks in Bootstrap

Discover how to prevent a link or text from appearing if a user has already browsed a particular webpage

The setInterval() function within a jQuery dialog continues running even after being destroyed or removed

sidebar that appears upon the initial page load

Incorporate 3 additional compound filters with shuffle.js

Combine the filter and orderBy components in AngularJS ng-options for a customized select dropdown menu

Incorporating jquery-ui in a Rails application does not lead to an error even with a fictional alias