您的位置:首页 > Web前端 > HTML

关于滚动条滚动到指定位置触发jq事件和html锚点

2017-06-02 11:22 387 查看
html代码:

   <div class="div_md" style="height: 38px;background: pink;">
<a href="#a">点击我就会跳到第一段</a>
<a href="#b">点击我就会跳到第二段</a>
<a href="#c">点击我就会跳到第三段</a>

   </div>

<h2 id="a" style="width:200px;height: 400px;background: red;">我是标题一</h2>

<h2 id="b" style="width:200px;height: 400px;background: pink;">我是标题二</h2>

<h2 id="c" style="width:200px;height: 300px;background: green;">我是标题三</h2>

jq代码:

$(function() {
$(".div_md a").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top - 100 + "px"
}, 1500);
return false;
});
//滚动条滚动到指定位置触发下面事件
var getDiv_md = $(".div_md");
var offSet = getDiv_md.offset().top;
$(window).scroll(function(){
if ($(window).scrollTop() > offSet){
$(".div_md").css({"position":"fixed","left":"10px","top":"10px","z-index":"2"});
}else{
$(".div_md").css({"position":"","left":"0px","top":"","z-index":""});
}
})
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  html jq js