Inspiring

Answered

smooth scroll jquery

Forum|Forum|8 years ago
August 3, 2017
1 reply
1895 views

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.

This topic has been closed for replies.

Correct answer Nancy OShea

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 OShea

Community Expert

What's the URL to your page please?

Nancy O'Shea— Product User & Community Expert

R

r_tistAuthor

Inspiring

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.

Nancy OShea

Correct answer

Community Expert

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded