Rectangle 27 82

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

Yeah, if it wasn't for the 15 characters minimum comment I would've commented on yours with: Snap! :P

This script is the winner, but I don't know whose to choose!

Well, seeing as I was first (by 15 seconds), I guess I deserve a win? :P As a token of gratitude I'll upvote symmet's answer for some extra rep...

Guys, what about my (related but unjustly downvoted) question? stackoverflow.com/questions/28400107/ maybe you will have some insight ?

html - jQuery Scroll to Div - Stack Overflow

jquery html
Rectangle 27 2

target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

The default for a HTML anchor is to jump to an element with the name / id after the "#".

Which could mean your target var is not actually returning an item and jQuery animate code not firing at all.

Here is simple code to scroll to a specified div with id "at_bottom" and a link back to the top.

Create a link with a custom attribute:

<a class="scroll_to" data-more-info="section_one">Go To Section One</a>

and a div with a matching ID

<div id="section_one" class="section">

When that link is clicked, extract the attribute value and scroll to the div with that ID.

$("a.scroll_to").click(function() {
  var target = $(this).attr("data-more-info");
  $("html, body").animate({ scrollTop: $("#"+target).offset().top - 50 }, "slow");
  return false;
});

The -50 is to offset the top margin in the fiddle. You probably won't need it.

This way you won't need to write click functions for all of your scroll buttons etc.

javascript - jQuery Animated Scroll Not Working - Stack Overflow

javascript jquery html5 jquery-animate
Rectangle 27 5

$('a[href^="#"]').click(function(){

var the_id = $(this).attr("href");

    $('html, body').animate({
        scrollTop:$(the_id).offset().top
    }, 'slow');

return false;});

This is not generic, this is jQuery.

javascript - Smooth scrolling when clicking an anchor link - Stack Ove...

javascript jquery scroll hyperlink anchor
Rectangle 27 5

$('a[href^="#"]').click(function(){

var the_id = $(this).attr("href");

    $('html, body').animate({
        scrollTop:$(the_id).offset().top
    }, 'slow');

return false;});

This is not generic, this is jQuery.

javascript - Smooth scrolling when clicking an anchor link - Stack Ove...

javascript jquery scroll hyperlink anchor
Rectangle 27 4

$(document).ready(function() {
    $("#socialbutton").click(function() {
        $('html, body').animate({
            scrollTop: $("#Abutton").offset().top
        }, 2000);
    });
});

Just stick the above code between your <script> tags (if at the bottom of the page, no need for the document.ready wrapper - but I figured I'd include it if you're not too proficient in JS/jQuery)

Good golly give this man something gold and shiny^! It worked! By the nine it worked! I could kiss you but I'm strictly butter side up. Also, I don't even know if that's possible through a desktop monitor anyway.

javascript - Smooth scrolling to div related - Stack Overflow

javascript jquery html scroll smooth
Rectangle 27 3

$('a[href*=#]').click(function(){
  $('html, body').animate({
    scrollTop: $( $.attr(this, 'href') ).offset().top
  }, 500);
  return false;
});

javascript - Smooth scrolling when clicking an anchor link - Stack Ove...

javascript jquery scroll hyperlink anchor
Rectangle 27 3

$('a[href*=#]').click(function(){
  $('html, body').animate({
    scrollTop: $( $.attr(this, 'href') ).offset().top
  }, 500);
  return false;
});

javascript - Smooth scrolling when clicking an anchor link - Stack Ove...

javascript jquery scroll hyperlink anchor
Rectangle 27 3

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

Wow! That works a treat. Update fiddle here: jsfiddle.net/xserjaqx/1 Question: how do I just apply this to certain links, not all of them?

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

javascript - Hyperlink scroll down screen on click - Stack Overflow

javascript jquery html css
Rectangle 27 4

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

this only seems to work for inner page anchor links, but anchor links from other pages do not work, for example website.com/about-us/#who-we-are

javascript - Smooth scrolling when clicking an anchor link - Stack Ove...

javascript jquery scroll hyperlink anchor
Rectangle 27 4

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

this only seems to work for inner page anchor links, but anchor links from other pages do not work, for example website.com/about-us/#who-we-are

javascript - Smooth scrolling when clicking an anchor link - Stack Ove...

javascript jquery scroll hyperlink anchor
Rectangle 27 3

function scrolltop() {

    var offset = 220;
    var duration = 500;

    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('#back-to-top').fadeIn(duration);
        } else {
            jQuery('#back-to-top').fadeOut(duration);
        }
    });

    jQuery('#back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    });
}

Scroll to the top of the page using JavaScript/jQuery? - Stack Overflo...

javascript jquery scroll
Rectangle 27 3

function scrolltop() {

    var offset = 220;
    var duration = 500;

    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('#back-to-top').fadeIn(duration);
        } else {
            jQuery('#back-to-top').fadeOut(duration);
        }
    });

    jQuery('#back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    });
}

Scroll to the top of the page using JavaScript/jQuery? - Stack Overflo...

javascript jquery scroll
Rectangle 27 3

function scrolltop() {

    var offset = 220;
    var duration = 500;

    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('#back-to-top').fadeIn(duration);
        } else {
            jQuery('#back-to-top').fadeOut(duration);
        }
    });

    jQuery('#back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    });
}

Scroll to the top of the page using JavaScript/jQuery? - Stack Overflo...

javascript jquery scroll
Rectangle 27 3

function scrolltop() {

    var offset = 220;
    var duration = 500;

    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('#back-to-top').fadeIn(duration);
        } else {
            jQuery('#back-to-top').fadeOut(duration);
        }
    });

    jQuery('#back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    });
}

Scroll to the top of the page using JavaScript/jQuery? - Stack Overflo...

javascript jquery scroll
Rectangle 27 3

function scrolltop() {

    var offset = 220;
    var duration = 500;

    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('#back-to-top').fadeIn(duration);
        } else {
            jQuery('#back-to-top').fadeOut(duration);
        }
    });

    jQuery('#back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    });
}

Scroll to the top of the page using JavaScript/jQuery? - Stack Overflo...

javascript jquery scroll
Rectangle 27 3

function scrolltop() {

    var offset = 220;
    var duration = 500;

    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('#back-to-top').fadeIn(duration);
        } else {
            jQuery('#back-to-top').fadeOut(duration);
        }
    });

    jQuery('#back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    });
}

Scroll to the top of the page using JavaScript/jQuery? - Stack Overflo...

javascript jquery scroll
Rectangle 27 1

jQuery(document).ready(function() {
    jQuery("a").on('click', function(event) {
        if (this.hash !== "") {
            // Prevent default anchor click behavior
            event.preventDefault();
            var hash = this.hash;
            jQuery('html, body').animate({
                scrollTop: jQuery(hash).offset().top - 75
            }, 1200, function() {
                window.location.hash = hash;
            });
        } // End if
    });
});

Tempted to give this a try after all the CSS fails

html - Anchor link direct to anchor offset by a number of pixels? - St...

html css anchor
Rectangle 27 1

jQuery(document).ready(function($) {

    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top - 59}, 800); 
    });
});

javascript - animated autoscroll to div onclick - Stack Overflow

javascript jquery
Rectangle 27 1

(function($) {
    $(".click-to-scroll").click(function() {
        $('html, body').animate({
            scrollTop: $("#top-home").offset().top
        }, 1000);
    });
}) (jQuery);

You needed to wrap the function in the curly braces. As well as close your opening parenthesis.

This looks correct to me, however, it's still not working. It may be an issue with theme I'm using, so I'm going to look more into it this weekend, and I'll update if I figure it out. Thank you for responding.

Hmm, I went to your site and pasted my code into the console and it worked correctly for me. However it only works on the first slide, and only when clicking on the down arrow, because this is the only element on the page that has a class of click-to-scroll

jquery - How can I link an image in Revolution Slider to a div id on t...

jquery css wordpress revolution-slider
Rectangle 27 1

$('a[href*="#"]').click(function(e) {
    e.preventDefault();
    var target = this.hash;
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
        window.location.hash = target;
    });
});

javascript - Smooth scrolling when clicking an anchor link - Stack Ove...

javascript jquery scroll hyperlink anchor