smooth scroll jquery

Report · Aug 03, 2017

Hi,

Applied a script for smooth scroll for a few button anchors. The only problem is it is also affecting my navicon dropdown nav... I do not want those two to interact in any way. My navicon nav functionality only became flawed when I applied this new smooth scroll script. How might this be altered to ignore all else going on?

This is the one I used... an ID is applied to each section:

Smooth Scrolling | CSS-Tricks

Also, one more thing. Because I have a sticky header at the top and these button links to smooth scroll are in the body of the page... I am finding they are dipping a bit below the top of the section (covering up the first part of the section). How might I resolve that so the header height is acknowledged and factored into the drop distance.

Thank you.

Report · Aug 03, 2017

What's the URL to your page please?

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 03, 2017

Not online yet...

This might help. Again, the jQuery was plugged in exactly as from the article I referenced.

this is the code it jumps to because you can see the IDs correspond.

<h3 id="part02" class="name">Bridges</h3>

I think some sort of exception needs to be made to the jQuery so it won't affect the navicon drop down:

$('a[href*="#"]')

// Remove links that don't actually link to anything

.not('[href="#"]')

.not('[href="#0"]')

.click(function(event) {

// On-page links

if (

location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')

&&

location.hostname == this.hostname

) {

// Figure out element to scroll to

var target = $(this.hash);

target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');

// Does a scroll target exist?

if (target.length) {

// Only prevent default if animation is actually gonna happen

event.preventDefault();

$('html, body').animate({

scrollTop: target.offset().top

}, 1000, function() {

// Callback after animation

// Must change focus!

var $target = $(target);

$target.focus();

if ($target.is(":focus")) { // Checking if the target was focused

return false;

} else {

$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable

$target.focus(); // Set focus again

};

});

}

});

</script>

Also if there's another script, simpler please reference and I will happily change out from this direction. It just cannot affect that roll out drop down of the navicon menu in the header.

Thanks.

Report · Aug 03, 2017

Try this in a new blank document.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 3.3.7 Starter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.center-block {float:none}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 center-block">
<p> </p>
<ul id="top">
<li><a class="page-scroll" href="#ID1">Section 1</a></li>
<li><a class="page-scroll" href="#ID2">Section 2</a></li>
<li><a class="page-scroll" href="#ID3">Section 3</a></li>
<li><a class="page-scroll" href="#ID4">Section 4</a></li>
</ul>
<section id="ID1">
<h3>Section 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum quod, ad deserunt tempora voluptate nemo aspernatur odit commodi fuga, enim non voluptatibus laborum? Ipsa asperiores, amet mollitia ipsam esse id.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod molestias rerum optio sequi quam doloribus qui! Repudiandae illo laudantium, accusamus velit maiores eum, aspernatur nobis, voluptates a asperiores quibusdam ad?</p>
</section>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<section id="ID2">
<h3>Section 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum quod, ad deserunt tempora voluptate nemo aspernatur odit commodi fuga, enim non voluptatibus laborum? Ipsa asperiores, amet mollitia ipsam esse id.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod molestias rerum optio sequi quam doloribus qui! Repudiandae illo laudantium, accusamus velit maiores eum, aspernatur nobis, voluptates a asperiores quibusdam ad?</p>
</section>
<p> </p>
<p> </p>
<p> </p>
<a class="page-scroll" href="#top">Top</a>
<p> </p>
<p> </p>
<section id="ID3">
<h3>Section 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum quod, ad deserunt tempora voluptate nemo aspernatur odit commodi fuga, enim non voluptatibus laborum? Ipsa asperiores, amet mollitia ipsam esse id.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod molestias rerum optio sequi quam doloribus qui! Repudiandae illo laudantium, accusamus velit maiores eum, aspernatur nobis, voluptates a asperiores quibusdam ad?</p>
</section>
<p> </p>
<p> </p>
<p> </p>
<a class="page-scroll" href="#top">Top</a>
<p> </p>
<p> </p>
<section id="ID4">
<h3>Section 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum quod, ad deserunt tempora voluptate nemo aspernatur odit commodi fuga, enim non voluptatibus laborum? Ipsa asperiores, amet mollitia ipsam esse id.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod molestias rerum optio sequi quam doloribus qui! Repudiandae illo laudantium, accusamus velit maiores eum, aspernatur nobis, voluptates a asperiores quibusdam ad?</p>
</section>
<a class="page-scroll" href="#top">Top</a>
</div>
</div>
</div>
<!--jQuery Core-->
<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous">
</script>
<!--Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--jQuery easing-->
<script src="https://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.min.js" defer></script> 
<script>                    
    // jQuery for page scrolling feature - requires jQuery Easing plugin
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });
</script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 03, 2017

experimenting - quick question... your call for the jQuery easing on the cdn is automatically calling that up to execute that?

Also my jQuery library is 1.11.3 ...I ought to get the one you are referencing 1.12.2... is that right?

Yours is working in clean new page, but when I go to implement in my page; not yet - and I would like to keep my ('a.btn btn-default') vs. the name you had of page-scroll, based on how my page is constructed.

Let me know, thank you!

Report · Aug 03, 2017

As a rule I use CDN hosted scripts whenever possible.
jQuery 1.12 is newer. It would probably work with the very latest 2x or 3x version, too. But I haven't tested it. jQuery CDN
Add page-scroll to your buttons like so:
<a class="btn btn-default page-scroll"

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 04, 2017

good info & good work! ok, here is what happened. the new smooth scroll on the buttons works perfectly!

However, it has now completely disabled my navicon smooth drop down menu for tablet and mobile phone break points.

What else can we do to make sure this new script solely applies only to these buttons?

Thanks for the assistance.

Report · Aug 04, 2017

It shouldn't effect anything other than anchors with class name page-scroll.

$('a.page-scroll').bind('click', etc....

What class name are you using for your navigation menus?

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Oct 02, 2017

The roll out menu for the navicon is a class called "header-bottom". No mention of page-scroll.

Here is the code for that piece:

<span class="sr-only">Toggle navigation</span>

</a>

</div></div></div></div>

</div>

<li><a target="_blank" href="#">Services</a></li>

<li><a target="_blank" href="#">About</a></li>

<li><a target="_blank" href="#">Opportunities</a></li>

<li><a target="_blank" href="#">Contact</a></li>

</ul>

</div></div>

</div>

smooth scroll jquery

1 Correct answer

Photos