Roman Nrokov Roman Nrokov - 3 days ago 4
jQuery Question

Smooth scrolling unit without using the attribute a [href ^ = "#"]

How to implement the transition when you click on the block with the class

<div class="btn">button-scroll </div>


Do not use aa [href ^ = "#"]
<a href="#one">One</a>


<aside>

<ul>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
<li><a href="#four">Four</a></li>
<li><a href="#five">Five</a></li>
<li><a href="#six">Six</a></li>
</ul>
</aside>

$(document).ready(function(){
// = Вешаем событие прокрутки к нужному месту
// на все ссылки якорь которых начинается на #
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();

var target = this.hash,
$target = $(target);

$('html, body').stop().animate({
'scrollTop': $target.offset().top-($('ul').height()+ 100)
}, 900, 'swing', function () {
window.location.hash = target;
});
});

});

#main h2 {
margin-top:400px;
}
ul{
position:fixed;
top: 0px;
}
ul li{
display:inline-block;
}

Answer

Hi you can try with following Instead of <div class="btn">button-scroll </div> add attribute 'target'like <div class="btn" target="targetDivId">button-scroll </div>

and in JavaScript

$(document).ready(function(){
    $('.btn').bind('click',function (e) {
        e.preventDefault();
        var target = $(this).attr('target'),
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top-(100)  
        }, 900, 'swing');
    });
});
Comments