Use href id to navigate back to the top of the page by

Question

Use href id to navigate back to the top of the page by

I am trying to implement a function that scrolls the div to the top position. However, I am encountering an issue with retrieving the href value. When I use 'a' in console.log(a);, it returns undefined.

function myFunction()
   {
      var a=$(this).attr('href');
  console.log(a);
  $('html, body').animate({scrollTop: $('#'+a).offset().top-40}, 500);
 }

#consulting,#segments,#partner,#insights{min-height:100vh;}
   .secMenu{position:fixed;
   }

<div class="container-fluid">
  <div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
 <ul class="nav navMenu">
 
  <li class="test1"><a href="#consulting" onclick="myFunction()">Consulting & Solutions</a></li>
  <li class="test2"><a href="#segments"  onclick="myFunction()">Segments</a></li>
  <li class="test3"><a href="#partner"  onclick="myFunction()">Our Partners</a></li>
  <li class="test4"><a href="#insights"  onclick="myFunction()">Perspectives</a></li>
</ul>  
</div>

   </div>   <!--End of second menu -->
    <div class="row">
   <div id="consulting">
   div1
</div>
<div id="segments">
div11
</div>
<div id="partner">
div111
</div>
<div id="insights">
 div1111
</div>
</div>
  </div>

javascript jquery html css

Answer 1

Answer №1

I have created a different approach than what you initially used, but the outcome remains the same. I opted to eliminate the function previously utilized and instead incorporated jQuery. Hopefully, my solution meets your requirements:

$('.nav li a').on('click', function(e) {
  e.preventDefault();
  var a = $(this).attr('href');
  $('html, body').animate({
    scrollTop: $(a).offset().top
  }, 500);
});

#consulting,
#segments,
#partner,
#insights {
  min-height: 100vh;
}
.secMenu {
  position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row secMenu">
    <div class="col-md-9 col-sm-12 menu">
      <ul class="nav navMenu">

        <li class="test1"><a href="#consulting">Consulting & Solutions</a>
        </li>
        <li class="test2"><a href="#segments">Segments</a>
        </li>
        <li class="test3"><a href="#partner">Our Partners</a>
        </li>
        <li class="test4"><a href="#insights">Perspectives</a>
        </li>
      </ul>
    </div>

  </div>
  <!--End of second menu -->
  <div class="row">
    <div id="consulting">
      div1
    </div>
    <div id="segments">
      div11
    </div>
    <div id="partner">
      div111
    </div>
    <div id="insights">
      div1111
    </div>
  </div>
</div>

To view the implementation in action, you can click on the Run code snippet button above or explore a fiddle here.

Answer 2

I have created a different approach than what you initially used, but the outcome remains the same. I opted to eliminate the function previously utilized and instead incorporated jQuery. Hopefully, my solution meets your requirements:

$('.nav li a').on('click', function(e) {
  e.preventDefault();
  var a = $(this).attr('href');
  $('html, body').animate({
    scrollTop: $(a).offset().top
  }, 500);
});

#consulting,
#segments,
#partner,
#insights {
  min-height: 100vh;
}
.secMenu {
  position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row secMenu">
    <div class="col-md-9 col-sm-12 menu">
      <ul class="nav navMenu">

        <li class="test1"><a href="#consulting">Consulting & Solutions</a>
        </li>
        <li class="test2"><a href="#segments">Segments</a>
        </li>
        <li class="test3"><a href="#partner">Our Partners</a>
        </li>
        <li class="test4"><a href="#insights">Perspectives</a>
        </li>
      </ul>
    </div>

  </div>
  <!--End of second menu -->
  <div class="row">
    <div id="consulting">
      div1
    </div>
    <div id="segments">
      div11
    </div>
    <div id="partner">
      div111
    </div>
    <div id="insights">
      div1111
    </div>
  </div>
</div>

To view the implementation in action, you can click on the Run code snippet button above or explore a fiddle here.

Answer 3

Answer №2

Since this is automatically linked to the global object (such as window in a browser), you may need to explicitly pass it to the function.

To achieve this, you can pass this as an argument to myFunction() like so: myFunction(this). In the definition of myFunction:

function myFunction(target) {...}

, the parameter target will now represent the anchor element being referenced.

Answer 4

Since this is automatically linked to the global object (such as window in a browser), you may need to explicitly pass it to the function.

To achieve this, you can pass this as an argument to myFunction() like so: myFunction(this). In the definition of myFunction:

function myFunction(target) {...}

, the parameter target will now represent the anchor element being referenced.

Use href id to navigate back to the top of the page by

Answer №1

Answer №2

Similar questions

Creating a three.js lathe object using SVG spline with a Bézier curve

Combining arrays using JavaScript

Tips for adjusting the transition speed duration in Bootstrap 4

Is it possible to achieve the lower link set in a pure CSS horizontal menu where the horizontal link set is positioned below horizontal text tabs?

Is there a way to verify that only the image was uploaded?

Tips for inserting the <a> HTML tag into a JSON array object

Sorting through nested objects on the client sideorFiltering

Verify the status of the checkbox to determine if the user has enabled or disabled

Exploring IdentityServer3: A Deep Dive into OAuth Flows and Varied Strategies

Enhance with Laravel combined with AngularJS

The functionality of jQuery to carry out an action via AJAX prior to form submission is not functioning

Unlimited Page Scrolling with Functional Browser Back Button using jQuery

axios error: Trying to access 'slice' property of null object

Encountering a CouchDB 401 Unauthorized Error

A custom ASP MVC form that triggers a specific action without redirecting, instead updating the original page

Navigating through the endless scroll behavior in Twitter using CasperJS (PhantomJS)

Obtain the value of an element from the Ajax response

Using 2 viewports depending on the device

Can the TEXT from a <select> be passed as the value of a hidden <input> element?

Reduce the spacing between div elements to eliminate any gap between the rows