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

这应该有效

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

});

一个工作小提琴 http://jsfiddle.net/tvTUu/

Answer 2

使用

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

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

您可以在此处找到更多信息（使用live-Demo）：
http://css-tricks.com/snippets/jquery/smooth-scrolling/

Answer 3

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

我为我工作。

Answer 4

如果我理解了问题，您需要将页面滚动到点击事件的顶部位置，并带有动画效果。我不久前做了类似的事情，这里是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 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;
});});

滚动到页面上的div

6 个答案: