滚动主菜单在详细信息页面上不起作用

Posted 2023-05-09

【中文标题】滚动主菜单在详细信息页面上不起作用

【英文标题】：scrolling home menu nog working on detail page

【发布时间】：2017-11-05 01:28:53

【问题描述】：

我们正在构建一个单页浏览器网站，其中包含产品组合项目的详细信息页面。现在我们在主页上的菜单滚动到该页面上的内容。

所以我有这样的菜单项。

<ul>
<li><a href="section-1">Section 1</a></li>
<li><a href="section-2">Section 2</a></li>
<li><a href="section-3">Section 3</a></li>
<li><a href="section-4">Section 4</a></li>
</ul>

内容 div 是这样构建的

<div id="section-1">Content</div>

现在这是我正在使用的 jquery，它在主页上运行良好

// Function: Scroll navigation to row
$('.navbar a').on('click', function(e) 
    e.preventDefault();
    var $row = $($(this).attr('href'));
    $('html, body').animate(
        scrollTop: ($row.offset().top - menuHeight - 78) 
    , 1000);
); 

所以现在，当我在详细信息页面上时，我只想单击任何菜单项，然后返回到正确内容的主页。

但是点击它不起作用，我收到了这个错误。

Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLAnchorElement.<anonymous> (website.js:26)
at HTMLAnchorElement.dispatch (jquery.js:3)
at HTMLAnchorElement.v.handle (jquery.js:3)

我已经尝试了很多东西，将绝对路径添加到 url，但我想解决这个问题，因为它不会滚动到内容..

【参考方案1】：

而$(this).attr('href') 输出将是section-1 你需要使用#

var $row = $('#' + $(this).attr('href'));

或 或不您需要在所有链接的href中添加#

<ul>
  <li><a href="#section-1">Section 1</a></li>
  <li><a href="#section-2">Section 2</a></li>
  <li><a href="#section-3">Section 3</a></li>
  <li><a href="#section-4">Section 4</a></li>
</ul>

注意：如果同一页面中的所有元素，此代码将起作用

关于您关于详细信息页面的问题，我只想单击任何菜单项，然后返回到正确内容的主页。

让我们开始吧

1st：如果detail页面停止click事件，您需要检查detail页面的url

所以我们假设你detail 页面是detail.html

在 html 上

<ul>
  <li><a href="http://www.yourwebsite/index.html#section-1">Section 1</a></li>
  <li><a href="http://www.yourwebsite/index.html#section-2">Section 2</a></li>
  <li><a href="http://www.yourwebsite/index.html#section-3">Section 3</a></li>
  <li><a href="http://www.yourwebsite/index.html#section-4">Section 4</a></li>
</ul>

在 Js 上

$(document).ready(function()
   var menuHeight = $('.navbar a').outerHeight(true);
   // Function: Scroll navigation to row
   $('.navbar a').on('click', function(e) 
    if(window.location.href.indexOf("detail.html") === -1)  // if url dosen't have the detail page so active the click event
      e.preventDefault(); // prevent redirect
      var $href = $(this).attr('href'); // get href
      var section = $('#' + $href.substr($href.indexOf("#") + 1));  // get the section from href
      $('html, body').animate(
          scrollTop: (section.offset().top - menuHeight - 78)
      , 1000);
     
  );
  // on load
   var url = window.location.href;  // get the page url
   if(window.location.hash.substr(1) !== '')
     var section = window.location.hash.substr(1);  // get the section after the `#` on url
     $('.navbar a[href*='+section+']').click(); // if url href with this section trigger click it
   
);

这是您的代码在索引页面上的工作方式

$(document).ready(function()
   var menuHeight = $('.navbar a').outerHeight(true);
   // Function: Scroll navigation to row
   $('.navbar a').on('click', function(e) 
    if(window.location.href.indexOf("detail.html") === -1)  // if url dosen't have the detail page so active the click event
      e.preventDefault(); // prevent redirect
      var $href = $(this).attr('href'); // get href
      var section = $('#' + $href.substr($href.indexOf("#") + 1));  // get the section from href
      $('html, body').animate(
          scrollTop: (section.offset().top - menuHeight - 78)
      , 1000);
     
  );
  // on load
   var url = window.location.href;  // get the page url
   if(window.location.hash.substr(1) !== '')
     var section = window.location.hash.substr(1);  // get the section after the `#` on url
     $('.navbar a[href*='+section+']').click(); // if url href with this section trigger click it
   
);

.navbar
	position : fixed;
	background : yellow;
	top : 0;
	left:0;
	right: 0;
	margin: 0;
	padding: 0;

div[id^=section]
	background : red;
	margin : 30px;
	min-height: 300px;

#section-1
	margin-top : 100px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navbar">
  <li><a href="http://www.yourwebsite/index.html#section-1">Section 1</a></li>
  <li><a href="http://www.yourwebsite/index.html#section-2">Section 2</a></li>
  <li><a href="http://www.yourwebsite/index.html#section-3">Section 3</a></li>
  <li><a href="http://www.yourwebsite/index.html#section-4">Section 4</a></li>
</ul>
<div id="section-1">Section 1</div>
<div id="section-2">Section 2</div>
<div id="section-3">Section 3</div>
<div id="section-4">Section 4</div>

这是从detail页面返回时您的代码应该如何工作

$(document).ready(function()
   var url = 'http://www.yourwebsite/index.html#section-2';
   var menuHeight = $('.navbar a').outerHeight(true);
   // Function: Scroll navigation to row
   $('.navbar a').on('click', function(e) 
    if(window.location.href.indexOf("detail.html") === -1)  // if url dosen't have the detail page so active the click event
      e.preventDefault(); // prevent redirect
      var $href = $(this).attr('href'); // get href
      var section = $('#' + $href.substr($href.indexOf("#") + 1));  // get the section from href
      $('html, body').animate(
          scrollTop: (section.offset().top - menuHeight - 78)
      , 1000);
     
  );
  // on load
   //var url = window.location.href;  // get the page url
   //if(window.location.hash.substr(1) !== '')
     var section = url.substr(url.indexOf("#") + 1);  // get the section after the `#` on url
		 //alert(section);
     $('.navbar a[href*='+section+']').click(); // if url href with this section trigger click it
   //
);

.navbar
	position : fixed;
	background : yellow;
	top : 0;
	left:0;
	right: 0;
	margin: 0;
	padding: 0;

div[id^=section]
	background : red;
	margin : 30px;
	min-height: 300px;

#section-1
	margin-top : 100px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navbar">
  <li><a href="http://www.yourwebsite/index.html#section-1">Section 1</a></li>
  <li><a href="http://www.yourwebsite/index.html#section-2">Section 2</a></li>
  <li><a href="http://www.yourwebsite/index.html#section-3">Section 3</a></li>
  <li><a href="http://www.yourwebsite/index.html#section-4">Section 4</a></li>
</ul>
<div id="section-1">Section 1</div>
<div id="section-2">Section 2</div>
<div id="section-3">Section 3</div>
<div id="section-4">Section 4</div>