单击按钮滚动到特定的 div [英] click button scroll to specific div

问题描述

我有一个带有固定菜单和内容框 (div) 的页面.单击菜单时，内容框滚动到特定 div.

到目前为止一切顺利.

这是这里的示例.https://jsfiddle.net/ezrinn/8cdjsmb9/11/

问题是当我将整个 div 包装起来，并将它们设置为显示/隐藏切换按钮时，滚动不起作用.

这是不起作用的示例.https://jsfiddle.net/ezrinn/8cdjsmb9/10/

这里还有一个片段

$('.btn').click(function() {$(".wrap").toggleClass('on');});var div_parent_class_name;var divs_class;var id_offset_map = {};$(document).ready(function() {div_parent_class_name = "wrap_scroll";divs_class = "页面部分";var scroll_divs = $("." + div_parent_class_name).children();id_offset_map.first = 0;scroll_divs.each(函数(索引){id_offset_map["#" + scroll_divs[index].id] = scroll_divs[index].offsetTop});$('a').bind('click', function(e) {e.preventDefault();var target = $(this).attr("href")$('.wrap_scroll').stop().animate({滚动顶部:id_offset_map[目标]}, 600, 函数() {/* location.hash = target-20;*///将哈希(#jumptarget)附加到pageurl});返回假；});});$(".wrap_scroll").scroll(function() {var scrollPos = $(".wrap_scroll").scrollTop();$("." + divs_class).each(function(i) {var divs = $("." + divs_class);divs.each(function(idx) {if (scrollPos >= id_offset_map["#" + this.id]) {$('.menu>ul>li a.active').removeClass('active');$('.menu>ul>li a').eq(idx).addClass('active');}});});}).scroll();

body,html {边距:0；填充:0；高度:3000px；}.wrap { 显示:无；}.wrap.on { 显示:块；}.菜单 {宽度:100px；位置:固定；顶部:40px；左:10px；}.menu a.active {背景:红色}.wrap_scroll {位置:绝对；顶部:20px；左:150px；宽度:500px；高度:500px；溢出-y:滚动}#家 {背景颜色:#286090；高度:200px；}#文件夹 {背景:灰色；高度:600px；}#关于 {背景颜色:蓝色；高度:800px；}#接触 {背景:黄色；高度:1000px；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button class="btn">显示/隐藏</button><div class="wrap"><div class="菜单"><ul><li><a class="active" href="#home">Home</a><li><a href="#portfolio">作品集</a><li><a href="#about">关于</a><li><a href="#contact">联系方式</a></ul>a

<div class="wrap_scroll"><div class="page-section" id="home">hh</div><div class="page-section" id="portfolio">pp</div><div class="page-section" id="about">aa</div><div class="page-section" id="contact">cc</div>

我需要什么来修复代码?请帮忙.

解决方案

当你计算你的 offset 时，div hidden 与 <代码>显示:无.这导致偏移被设置/计算为零.

这是我整理的一个快速解决方案:https://jsfiddle.net/hrb58zae/

基本上，移动逻辑以确定单击显示/隐藏后的偏移量.

var setOffset = null;...如果(！setOffset){var scroll_divs = $("." + div_parent_class_name).children();id_offset_map.first = 0;scroll_divs.each(函数(索引){id_offset_map["#" + scroll_divs[index].id] = scroll_divs[index].offsetTop});setOffset = 真；}

I have a page that has a fixed menu and content box(div). When click the menu, content box scroll to specific div.

So far so good.

This is the sample here. https://jsfiddle.net/ezrinn/8cdjsmb9/11/

The problem is when I wrap this whole div and, make them as show/hide toggle button, the scroll is not working.

This is the sample that not working. https://jsfiddle.net/ezrinn/8cdjsmb9/10/

Also here is the snippet

$('.btn').click(function() {
  $(".wrap").toggleClass('on');
});
 
var div_parent_class_name;
var divs_class;
var id_offset_map = {};
$(document).ready(function() { 
    div_parent_class_name = "wrap_scroll";
    divs_class = "page-section"; 

    var scroll_divs = $("." + div_parent_class_name).children();
    id_offset_map.first = 0;
    scroll_divs.each(function(index) {
        id_offset_map["#" + scroll_divs[index].id] = scroll_divs[index].offsetTop
    });

    $('a').bind('click', function(e) {
        e.preventDefault();
        var target = $(this).attr("href")
        $('.wrap_scroll').stop().animate({
            scrollTop: id_offset_map[target]
        }, 600, function() {
            /* location.hash = target-20; */ //attach the hash (#jumptarget) to the pageurl
        });

        return false;
    });
});

$(".wrap_scroll").scroll(function() {
    var scrollPos = $(".wrap_scroll").scrollTop();
    $("." + divs_class).each(function(i) {
        var divs = $("." + divs_class);

        divs.each(function(idx) {
            if (scrollPos >= id_offset_map["#" + this.id]) {
                $('.menu>ul>li a.active').removeClass('active');
                $('.menu>ul>li a').eq(idx).addClass('active');
            }
            
        }); 
    });
}).scroll();

body,
html {
    margin: 0;
    padding: 0;
    height: 3000px;
}


.wrap { display:none;}
.wrap.on { display:block;}

.menu {
    width: 100px;
    position: fixed;
    top: 40px;
    left: 10px;
}

.menu a.active {
    background: red
}

.wrap_scroll {
    position: absolute;
    top: 20px;
    left: 150px;
    width: 500px;
    height: 500px;
    overflow-y: scroll
}

#home {
    background-color: #286090;
    height: 200px;
}

#portfolio {
    background: gray;
    height: 600px;
}

#about {
    background-color: blue;
    height: 800px;
}

#contact {
    background: yellow;
    height: 1000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn">show/hide</button> 

<div class="wrap">  
  <div class="menu">
      <ul>
          <li><a class="active" href="#home">Home</a> </li>
          <li><a href="#portfolio">Portfolio</a> </li>
          <li><a href="#about">About</a> </li>
          <li><a href="#contact">Contact</a> </li>
      </ul>a
  </div> 
  
  <div class="wrap_scroll">
      <div class="page-section" id="home">hh</div>
      <div class="page-section" id="portfolio">pp</div>
      <div class="page-section" id="about">aa</div>
      <div class="page-section" id="contact">cc</div>
  </div>

</div>

What Do I need to fix the code? please help.

解决方案

When you calculate your offset, the div is hidden with display: none. This results in the offsets being set/calculated to zero.

Here's a quick fix I threw together: https://jsfiddle.net/hrb58zae/

Basically, moved the logic to determine offset after clicking show/hide.

var setOffset = null;

...

if (!setOffset) {
    var scroll_divs = $("." + div_parent_class_name).children();
    id_offset_map.first = 0;
    scroll_divs.each(function(index) {
        id_offset_map["#" + scroll_divs[index].id] = scroll_divs[index].offsetTop
    });
    setOffset = true;
}

这篇关于单击按钮滚动到特定的 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！