单击按钮滚动到特定的div

Question

我有一个页面，该页面具有固定的菜单和内容框（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 = "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>

我需要修复什么代码？请帮忙。

Answer 1

计算offset时，div是hidden与display: none。这样就将偏移量设置/计算为零。

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

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

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;
}

Answer 2

在CSS中，尝试使用display: none代替display: block和visible：

.wrap { visibility:hidden;}
.wrap.on { visibility:visible;}

这将隐藏元素而不影响布局。

更新的小提琴：https://jsfiddle.net/a5u683es/

Answer 3

问题在于隐藏内容时您正在尝试更新id_offset_map。当您使用“ display：none”道具时，您将无法获得该元素的尺寸，因此无法正常工作。

我更新了逻辑，请检查小提琴https://jsfiddle.net/qfrsmnh5/

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

}

$(document).ready(function() { 

    $('.btn').click(function() {
      $(".wrap").toggleClass('on');
      if($(".wrap").hasClass("on")){
        updateOffsets();
      }
    });

    $('a').on('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").on('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>
  </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>

Answer 4

完美地工作，只是当您使用display时：没有，您不能进行offsetTop计算，因为实际上该元素未呈现，我不确定所有值是否都为0或未定义，我猜未定义，解决方案始终是使用函数来计算排名：

var div_parent_class_name;
var divs_class;
var id_offset_map = {};
function calcTops(){
    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
    });
}

https://jsfiddle.net/561oe7rb/1/

不是最佳方法，但可以给您一个想法。对不起，我的英语。

Answer 5

仅结帐我设计的工作页面

jQuery(document).on('scroll', function(){
			onScroll();

		});
		jQuery(document).ready(function($) {
			div_slider();
			showhide();
		});

		/*show hide content*/
		function showhide(){
			$('.toggle-wrapper button').on('click', function(){
				$('.wrapper').toggle();
				// div_slider();
			})
		}	

		/*scrolling page on header elements click*/
		function div_slider(){
			$('ul li a').on('click', function(e){
				e.preventDefault();
				$('ul li a').removeClass('active');
				$(this).addClass('active');
				var attrval = $(this.getAttribute('href'));
				$('html,body').stop().animate({
					scrollTop: attrval.offset().top
				}, 1000)
			});
		}

		/*adding active class on header elements on page scroll*/
		function onScroll(event){
			var scrollPosition = $(document).scrollTop();
			$('ul li a').each(function () {
				var scroll_link = $(this);
				var ref_scroll_Link = $(scroll_link.attr("href"));
				if (ref_scroll_Link.position().top <= scrollPosition && ref_scroll_Link.position().top + ref_scroll_Link.height() > scrollPosition) {
					$('ul li a').removeClass("active");
					scroll_link.addClass("active");
				}
				else{
					scroll_link.removeClass("active");
				}
			});
		}

body {
	margin: 0;
}
.toggle-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #ccd2cc;
	text-align: center;
}
.toggle-wrapper button {
	background-color: #ED4C67;
	color: #ffffff;
	padding: 10px 20px;
	border: 0;
	cursor: pointer;
	border-radius: 5px;
}
.toggle-wrapper button:active{
	background-color: #B53471;
}
header {
	background-color: #6C5CE7;
	position: fixed;
	top: 36px;
	z-index: 99;
	left: 0;
	right: 0;
}
	header ul {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0;
	margin: 0;
}
ul li {
	flex: 1 100%;
	display: flex;
	justify-content: center;
}
.wrapper {
	margin-top: 36px;
}
header a {
	color: #ffffff;
	padding: 15px;
	display: block;
	text-decoration: navajowhite;
	text-transform: uppercase;
	width: 100%;
	text-align: center;
}
header a.active {
	color: #000000;
	background-color: #ffffff;
}
section {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
section.section1 {
	background-color: #FFEAA7;
}
section.section2{
	background-color:#FAB1A0;
}
section.section3{
	background-color:#7F8C8D;
}
section.section4{
	background-color:#4CD137;
}
section.section5{
	background-color:#A3CB38;
}
section.section6{
	background-color:#70A1FF;
}
section.section7{
	background-color:#079992;
}

<div class="toggle-wrapper">
		<button>Toggle</button>
	</div>
	<div class="wrapper" style="display: none;">
		<header>
			<ul>
				<li><a class="active" href="#one">one</a></li>
				<li><a href="#two">two</a></li>
				<li><a href="#three">three</a></li>
				<li><a href="#four">four</a></li>
				<li><a href="#five">five</a></li>
				<li><a href="#six">six</a></li>
				<li><a href="#seven">seven</a></li>
			</ul>
		</header>
		<section class="section1" id="one">SECTION ONE</section>
		<section class="section2" id="two">SECTION TWO</section>
		<section class="section3" id="three">SECTION THREE</section>
		<section class="section4" id="four">SECTION FOUR</section>
		<section class="section5" id="five">SECTION FIVE</section>
		<section class="section6" id="six">SECTION SIX</section>
		<section class="section7" id="seven">SECTION SEVEN</section>
	</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>