Jquery Scroll Smoth

Asked

Viewed 60 times

1

I have the following JS code: It is applying a Smooth to scroll to all elements with the reference "#" when I click.

JS

$('a[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) {
                        var targetOffset = $target.offset().top;
                        $('html,body').animate({scrollTop: targetOffset}, 600);
                        return false;
                }                   
        }           
    });

Only I didn’t want him to apply that Smooth to that code:

HTML

 <div class="col-md-6">
        <h3>Pills left</h3>
        <!-- tabs left -->
        <div class="tabbable">
            <ul class="nav nav-pills nav-stacked col-md-3">
                <li><a href="#a" data-toggle="tab">One</a></li>
                <li class="active"><a href="#b" data-toggle="tab">Two</a></li>
                <li><a href="#c" data-toggle="tab">Twee</a></li>
            </ul>
            <div class="tab-content col-md-9">
                <div class="tab-pane active noscroll" id="a">Lorem ipsum dolor sit amet, charetra varius rci quis tortor imperdiet venenatis quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</div>
                <div class="tab-pane noscroll" id="b">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.</div>
                <div class="tab-pane noscroll" id="c">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis elementum auctor accumsan. Duis pharetra
                varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae. </div>
            </div>
        </div>
        <!-- /tabs -->
    </div>

How can I do?

1 answer

2


you can create some property to inform that you do not want the effect to be applied to that element, in the example below I am using a custom data:

<a href="#c" data-toggle="tab" data-ignore-smoth="" >Twee</a>

then you can apply a condition in your click:

$('a[href*=#]').click(function() {
    if (this.dataset.ignoreSmoth) {
        return;
    }   
    //seu script
});

or even a filter

$('a[href*=#]').not("[data-ignore-smoth]").click(function() {
    //seu script
});
  • Would something be like this? https://jsfiddle.net/f5g335z9/

Browser other questions tagged

You are not signed in. Login or sign up in order to post.