Question

我们正在构建一个寻呼机网站，其中包含详细信息页面。现在我们在主页上滚动菜单到该页面上的内容。

所以我有菜单项目。

<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的绝对路径，但我想解决这个问题，因为它不会滚动到内容然后..

Answer 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>

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

关于您在详细信息页面上关于的问题，我只想点击任何菜单项，然后返回主页右侧内容。

让我们开始这样做

第一：如果detail页面停止detail活动

，您需要查看click页面的网址

因此，我们假设您detail页面为detail.html

on 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>

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

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

＆＃13;

$(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
   }
});

＆＃13;

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

＆＃13;

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

＆＃13;

这是针对从detail页面

返回后代码的工作原理

＆＃13;

$(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
   //}
});

＆＃13;

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

＆＃13;

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

＆＃13;

滚动主菜单nog在详细页面上工作

1 个答案: