JQuery scrollto blocks my input field

Question

I have made a CMS page where I can add text to my site. On the page I have multiple submit forms. To avoid scrolling, I made a menu with jquery scrollto actions to jump to the right submit form.

$(document).on('click', '#scrollto_blogpost', function(event) {
    $('html,body').animate({
        scrollTop: $('#blogtitle').offset().top -100
    }, 'slow');
});

It jumps directly to input field #blogtitle (which is the upper input field of the form) and I offset it to give it some spacing between the browser edge and the input field.

If I click on the menu item, it jumps to the form, but I can't click on the input fields and a click on the submit button is also ignored. A textarea box does react on a click, but only somewhere around the second line.

The workaround at the moment is: - jump to the form. - manually scroll up and down with your mouse - and all input fields do react on mouse clicks.

I guess it has something to do with the offset, but I can't find the right solution.

Answer 1

//This is static

 $('#scrollto_blogpost').click(function() {
            $.scrollTo( '#blogtitle', 800, {easing:'swing'} );
            $('#blogtitle').effect('highlight', {}, 3000);
        });

//To use Dynamic for different link and divs make it like this

<a href="#divid" class="link">click me</a>
<div id="divid">Your DIv</div>
$('.link').click(function(event) {
            event.preventDefault();
            var id =$(this).attr('href') //make sure your href="#divid"
            $.scrollTo( id, 800, {easing:'swing'} );
            $(id).effect('highlight', {}, 3000);
        });