javascript - 滚动到页面上的 div

Question

我正在尝试在发生.click事件时滚动页面。这是我到目前为止所拥有的：

jQuery：

function scrollToStart() {
    $("#scrollToStart").click(function() {
      $("#startHere").animate({ scrollTop: 0 }, "slow");
      return false;
    });
}

HTML：

<a href="#startHere" id="scrollToStart">
    <img class="img-center" src="images/get-started.png"/>
</a>

当我点击时，它什么也没做。我做错了什么？

Answer 1

this should work

$("#scrollToStart").click(function (){
       $('html, body').animate({
       crollTop: $("#startHere").offset().top
     }, 2000);

});

a working fiddle http://jsfiddle.net/tvTUu/

Answer 2

利用

$('html,body').animate({    
 scrollTop: $("#divToBeScrolledTo").offset().top;    
});

始终滚动到scrollTop: 0页面顶部。

您可以在此处找到更多信息（带有现场演示）：
http ://css-tricks.com/snippets/jquery/smooth-scrolling/

Answer 3

如果我正确理解了这个问题，您需要将页面滚动到点击事件的顶部位置，并带有动画效果。不久前我做了类似的事情，这里是 JavaScript 代码。

innerAnimationStep = 25;
innerScrollStep = 1;

function scrollTopAnimated(scrollStep, animationStep)
{
    try
    {
        innerScrollStep = scrollStep;
        innerAnimationStep = animationStep;
        scrollTopAnimationStep();
    }
    catch(e)
    {
        console.log(e.message);
    }
}

function scrollTopAnimationStep()
{   
    try
    {
        var jDocument = $(document); 
        if(jDocument.scrollTop() > 0)
        {
            jDocument.scrollTop( jDocument.scrollTop() - innerScrollStep );
            setTimeout(scrollTopAnimationStep, innerAnimationStep);
        }
    }
    catch(e)
    {
        console.log(e.message);
    }
}

只需调用scrollTopAnimated即可获得具有动画效果的页面滚动。我希望它可以帮助。

Answer 4

$(function(){// when dom loaded
    $("#scrollToStart").click(function (){
       $(document.body).animate({
          scrollTop: 0
       });
    });
});

我为我工作。

Answer 5

$("#scrollToStart").bind('click',function() {

$('body , html').animate(
  {
    scrollTop :  $("#startHere").offset().top
  } , 2000 ) ;
});

http://justprogrammer.com/2013/06/21/scroll-to-specifically-element-in-browser/ http://justprogrammer.com/2013/06/25/jquery-basic-concepts/

Answer 6

$( document ).ready(function(){
$("#scrollToStart").click(function() {
  $("#startHere").animate({ scrollTop: 0 }, "slow");
  return false;
});});