Dranreb Dranreb -4 years ago 93
HTML Question

Smooth scroll internal link won't work

I have this html:

<html>
<head>
<title>Welcome</title>
</head>

<body>

<form id = "form_createaccount_button" action="#createchooserblink">
<input type="submit" value="go to article" />
</form>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<a name = "createchooserblink">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie leo ornare vestibulum accumsan. Etiam dignissim leo cursus eleifend dapibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer et condimentum nunc. Vivamus libero ante, malesuada sed neque vitae, tristique aliquet mi. Vestibulum imperdiet blandit condimentum. Vestibulum sit amet iaculis felis. Sed quis condimentum est, at pellentesque elit. Curabitur rhoncus erat ut magna dictum, in pretium lectus accumsan. Praesent vel libero justo.
</a>

<script>
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>

</body>
</html>


When clicking the
go to article link
, it moves me to the bottom article text which worked perfectly. The only thing that is not working is the javascript which was suppose to "semi-animate" the page to scroll to the said link.



Did I wrote something wrong?

Answer Source

It doesn't work because of your selector.

$('a[href*="#"]:not([href="#"])')

There is no "a" tag in your DOM tree. Change it to $('#form_createaccount_button input')

UPDATE

I corrected whole your HTML sample. You may correct your document like this.

<!DOCTYPE html>
<html>

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>

  <body>

    <form id = "form_createaccount_button" action="#createchooserblink">
        <input type="submit" value="go to article" />
    </form>

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <a name = "createchooserblink">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie leo ornare vestibulum accumsan. Etiam dignissim leo cursus eleifend dapibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer et condimentum nunc. Vivamus libero ante, malesuada sed neque vitae, tristique aliquet mi. Vestibulum imperdiet blandit condimentum. Vestibulum sit amet iaculis felis. Sed quis condimentum est, at pellentesque elit. Curabitur rhoncus erat ut magna dictum, in pretium lectus accumsan. Praesent vel libero justo.
    </a>

    <script>
      $(function() {
          $('input').click(function(e) {
          e.preventDefault();
          var hash = $(this).parent('form').attr('action');
          var target = $(hash);
          target = target.length ? target : $('[name=' + hash.slice(1) +']');
          if (target.length) {
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 1000);
          }

          setTimeout(function(){window.location.href = window.location.href + hash}, 1000);
      });
      });
    </script>

  </body>
</html>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download