Javascript 在单击/ul li/jQuery时平滑滚动

我在“问答”部分遇到了问题。这里有4个问题，都是链接。 如果你点击其中一个，一个“p”将会向下滑动。等等。但是我希望当你点击这个问题时，页面可以向下或向上滚动到合适的位置（比如顶部）

$（函数（）{
var$\u openedFaq=null；
函数openFaq（$\up）{
$u p.slideDown（）；
}
函数关闭FAQ（$\uu\p）{
$\uu p.slideUp（）；
}
$（'.faq ul li'）。每个（函数（）{
var$faq=$（本）；
var$p=$（this.find（'p'）；
$（this）。查找（'a'）。单击（函数（e）{
e、 预防默认值（）；
如果（$\u openedFaq！=null）{
closeFaq（$_openedFaq.find（'p'））；
$\u openedFaq.find（'a'）.removeClass（“open”）；
}
如果（$_openedFaq==null）|（$_openedFaq！=null）&&&！$faq.is（$_openedFaq）））{
openFaq（$p）；
$\u openedFaq=$faq；
$p.prev（'a'）.addClass（“开放”）；
}否则{
$\u openedFaq=null；
}
});
});
});

.常见问题{
背景色：#F5；
填充顶部：65px；
填充底部：65px；
}
.faq分区容器分区行分区列-sm-6 h1{
字体系列：“源衬线专业”，衬线；
文本对齐：居中；
字体大小：60px；
保证金：0；
填充底部：40px；
}
.faq部分集装箱部分行部分col-sm-6 ul{
列表样式类型：无；
填充：0；
}
.faq部分集装箱部分行部分col-sm-6 ul li{
字体大小：粗体；
字体大小：14px；
填充：10px 10px；
填充顶部：20px；
边框底部：1px实心#bfbf；
位置：相对位置；
}
.faq div.container div.row div.col-sm-6 ul li:最后一个孩子{
边框底部：无；
}
.faq部分集装箱部分行部分col-sm-6 ul li a{
文字装饰：无；
颜色：#4a4a4a；
右侧填充：自动；
-webkit过渡：颜色0.25s线性；
-o-过渡：颜色0.25s线性；
过渡：颜色0.25s线性；
}
.faq div.container div.row div.col-sm-6 ul li a:悬停{
颜色：黑色；
}
.faq div.container div.row div.col-sm-6 ul li a:悬停：：之后{
颜色：黑色；
}
.faq div.container div.row div.col-sm-6 ul li a:：after{
内容：“\e008”；
字体系列：“公路出行项目图标”；
颜色：#f9b40a；
位置：绝对位置；
顶部：20px；
右：0；
-webkit过渡：颜色0.25s线性；
-o-过渡：颜色0.25s线性；
过渡：颜色0.25s线性；
}
.faq分区集装箱分区行分区col-sm-6 ul li a打开{
颜色：黑色；
}
.faq div.container div.row div.col-sm-6 ul li a.open:：after{
内容：“\e007”；
字体系列：“公路出行项目图标”；
颜色：黑色；
位置：绝对位置；
顶部：20px；
右：0；
}
.faq部分集装箱部分行部分col-sm-6 ul li p{
字体大小：正常；
显示：无；
}
.faq部分集装箱部分行部分列-sm-6 img{
宽度：100%；
}
.常见问题{
填充顶部：200px；
高度：750px；
}

问答



知识是一种美德，是一种美德，是一种美德，是一种美德。这是一个非常小的节日。




知识是一种美德，是一种美德，是一种美德，是一种美德。这是一个非常小的节日。




知识是一种美德，是一种美德，是一种美德，是一种美德。这是一个非常小的节日。




知识是一种美德，是一种美德，是一种美德，是一种美德。这是一个非常小的节日。




}))

href是目标的id
您可以通过以下方式收集每个元素的偏移顶部
li
：

var offset=$（this）.offset（）.top

然后使用以下命令进行平滑滚动：

$('html, body').animate({
     scrollTop: offset
}, 1000);

演示：


$（函数（）{
var$\u openedFaq=null；
函数openFaq（$\up）{
$u p.slideDown（）；
}
函数关闭FAQ（$\uu\p）{
$\uu p.slideUp（）；
}
$（'.faq ul li'）。每个（函数（）{
var$faq=$（本）；
var$p=$（this.find（'p'）；
var offset=$（this）.offset（）.top；
$（this）。查找（'a'）。单击（函数（e）{
e、 预防默认值（）；
$（'html，body'）。设置动画({
滚动顶：偏移量
}, 1000);
如果（$\u openedFaq！=null）{
closeFaq（$_openedFaq.find（'p'））；
$\u openedFaq.find（'a'）.removeClass（“open”）；
}
如果（$_openedFaq==null）|（$_openedFaq！=null）&&&！$faq.is（$_openedFaq）））{
openFaq（$p）；
$\u openedFaq=$faq；
$p.prev（'a'）.addClass（“开放”）；
}否则{
$\u openedFaq=null；
}
});
});
});
@charset“UTF-8”；
@字体{
字体系列：“Conv_Besom”；
src:url（“../font/Besom.eot”）；
src:local（“☺"), url（“../font/Besom.woff”）格式（“woff”）、url（../font/Besom.ttf”）格式（“truetype”）、url（../font/Besom.svg”）格式（“svg”）；
字体大小：正常；
字体风格：普通；
}
身体{
字体系列：“Roboto”，无衬线；
字母间距：1px；
字体大小：14px；
字号：500；
}
部分{
背景色：#f9b40a；
}
/* ################### */
/*导航栏*/
/* ################### */
标题{
位置：固定；
排名：0；
右：0；
左：0；
背景色：rgba（0,0,0,0.4）；
文本转换：大写；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
填充顶部：20px；
垫底：20px；
z指数：1000；
}
@仅介质屏幕和（最大宽度：740px）{
标题.导航栏{
背景色：黑色；
}
}
标题导航{
位置：绝对位置；
最高：50%；
右：0；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
右边距：40px；
-webkit转换：translateY（-50%）；
-ms转换：translateY（-50%）；
茶
$('html, body').animate({
     scrollTop: offset
}, 1000);