How to make this scroll to div script "smooth"

Question

So I found this script by a user of this site however I can't remember the author. The script is working, however I want it to scroll more "smoothly" than just instantly appear at my desired information. And if possible, have the destination appear 300pixels above the div.

How do I do that?

#general{
  margin-top:900px; 
  height: 100px;
  weight:  100px;
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var hashTagActive = "";
$(".scroll").click(function (event) {
    if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
        event.preventDefault();
        //calculate destination place
        var dest = 0;
        if ($(this.hash).offset().center > $(document).height() - $(window).height()) {
            dest = $(document).height() - $(window).height();
        } else {
            dest = $(this.hash).offset().center;
        }
        //go to destination
        $('html,body').animate({
            scrollTop: dest
        }, 2000, 'swing');
        hashTagActive = this.hash;
    }
});
</script>
<div>
<a class="scroll" href="#general">Hello</a>
</div>
<div id="general">
</div

user4013347 · Accepted Answer · 2015-03-03 21:58:24Z

1

For a smoother scroll you can use:

$(document).ready(function() {
  $("ANCHOR LINK").click(function(event){     
    event.preventDefault();
    $("html, body").animate({scrollTop:$(this.hash).offset().top}, 1000);
  });
});

And you see the last number? 1000, make it bigger to make it slower.

The second thing I'm afraid I can't help you with.

answered Mar 3, 2015 at 21:58

user4013347

Sign up to request clarification or add additional context in comments.

Comments

rojobuffalo · Accepted Answer · 2015-03-06 04:25:09Z

0

How to animate to #id links:

jsfiddle

HTML

<a href="#content">Click me!</a><br>
<a href="google.com">Google.com</a>
<div id="content"></div>

CSS

#content {
    margin-top: 900px; 
    height: 100px; width: 100px;
    background-color: lightgreen;
}

jQuery

$('a').on('click', function (event) {
    var target = $(this.hash),
        top;

    if (target) {
        top = target.offset().top;

        event.preventDefault();

        $('html, body').animate({
            scrollTop: top
        }, 600, 'swing');
    }
});

edited Mar 6, 2015 at 4:25

answered Mar 3, 2015 at 22:19

rojobuffalo

3,2533 gold badges17 silver badges17 bronze badges

2 Comments

Frans Bergström Over a year ago

I'm trying your code and it works in jsfiddle but when I try to include it in my html it doesn't work. It works in jsfiddle but not when I make a html, its like there is no script. I tested another script to see if jquery was propely imported and it succeded, so it's not that I think. My page

rojobuffalo Over a year ago

When I clicked your link, I got "webpage not available". Maybe paste your .html example? console.log is a good method to test which blocks of javascript are executing.

cakan · Accepted Answer · 2015-03-03 22:18:53Z

0

For smooth scroll to 300px above top of the element, your JavaScript function should look like this :

$(".scroll").click(function (event) {
    $('html,body').animate({
        scrollTop: ($(this.hash).offset().top - 300)
    }, 2000);
    event.preventDefault();
});

answered Mar 3, 2015 at 22:18

cakan

2,1175 gold badges33 silver badges45 bronze badges

Collectives™ on Stack Overflow

How to make this scroll to div script "smooth"

3 Answers 3

Comments

HTML

CSS

jQuery

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

HTML

CSS

jQuery

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related