平滑滚动文档的子元素而不滚动文档

时间:2018-01-13 00:06:19

标签: jquery smooth-scrolling

对于典型的平滑滚动,有一百万个答案。不同之处在于,当我点击element1中的链接时,我试图获取element2(带滚动条)以平滑滚动。也许这是不可能的。元素滚动(不慢),不幸的是父窗口也滚动。我将使用HTML,jQuery和& CSS ...

HTML:

<div class="element1">
<a href="#123">Click to See Listing</a>
<a href="#124">Click to See Listing</a>
<a href="#125">Click to See Listing</a>
</div>

<div class="element2 listings">
<div class="listing" id="123">element contents</div>
<div class="listing" id="124">element contents</div>
<div class="listing" id="125">element contents</div>
etc. etc.
</div>

jQuery的:

<script>
    jQ=jQuery.noConflict();
    jQ(document).ready(function(){
        jQ("a").on('click', function(event) {
            if (this.hash !== "") {
                event.preventDefault();
                var hash = this.hash;
                jQ('html, body').animate({
                    scrollTop: jQ(hash).offset().top-100
                }, 800);
            }
        });
    });
</script>

我也试过jQ(&#39; .listings&#39;)而不是jQ(&#39; html,body&#39;)

CSS:

.listings {
width:300px;
height:500px;
overflow-y:scroll;
}

1 个答案:

答案 0 :(得分:1)

您可以使用

add_filter( 'woocommerce_quantity_input_args', 'jk_woocommerce_quantity_input_args', 10, 2 );
function jk_woocommerce_quantity_input_args( $args, $product ) {
    if ( is_cart() || is_checkout()  && has_term( 'mug', 'product_tag') && 
    current_user_can('wholesale') ) {
        $args['input_value'] = 36; // Start from this value (default = 1) 
        $args['min_value']   = 36; // Minimum value
        $args['step']        = 36; // Quantity steps
        return $args;
    } else {
        $args['input_value'] = 1; // Start from this value (default = 1) 
        $args['min_value']   = 1; // Minimum value
        $args['step']        = 1; // Quantity steps
        return $args;
    }
}

// Variations
add_filter( 'woocommerce_available_variation', 'jk_woocommerce_available_variation' );
function jk_woocommerce_available_variation( $args ) {
    if (  has_term( 'mug', 'product_tag') && 
    current_user_can('wholesale') ) {
        $args['input_value'] = 36; // Start from this value (default = 1) 
        $args['min_value']   = 36; // Min quantity (default = 1)
        $args['step']        = 36; // Increment/decrement by this value (default = 1)
        return $args;
    } else {
        $args['min_value']   = 1; // Minimum value
        $args['step']        = 1; // Quantity steps
        $args['input_value'] = 1; // Starting value (we only want to affect product pages, not cart)
        return $args;
    } 
}

问题是当你包含offset()时,你还需要包含scrollContainer的当前scrollvalue

附上一个参考小提琴 https://jsfiddle.net/70b9mry4/