如何使这个滚动到div脚本“顺利”

Question

所以我这个网站的用户发现了这个脚本，但是我记不起作者了。该脚本正在运行，但是我希望它能够“平滑”地滚动，而不是立即显示在我想要的信息上。如果可能，让目标在div上方显示300像素。

我该怎么做？

#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

Answer 1

要获得更流畅的滚动，您可以使用：

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

你看到最后一个号码？ 1000，让它更大，让它变慢。

第二件事，我担心我无法帮助你。

Answer 2

为了平滑滚动到元素顶部300px，您的JavaScript函数应如下所示：

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

Answer 3

如何设置#id链接的动画：

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');
    }
});